付録 E. スタックコンテキストの詳説

この章では、仕様の残りにおける説明よりも詳細にCSS 2.2描画順序を定義する。

E.1 定義

ツリー順: 周りのボックスを移動するプロパティを考慮した後、双方向のコンテンツのに対する論理的な（視覚でない）順序で、レンダリングツリーの先行順に深さ探索すること。
要素: この説明において"要素"は、実際の要素、疑似要素、および匿名ボックスを指す。疑似要素および匿名ボックスは、適切な場所で子孫として扱われる。たとえば、外側のリストマーカーはラインボックスに隣接する':before'ボックスの前に来るが、これは、ボックスコンテンツの前に来る、など。

E.2 描画順序

スタックの最下部はユーザーから最も遠いが、スタックの最上位はユーザーに最も近い：

	     |	   |	     |	  |
	     |		|    |	  |	⇦ ☻
	     |		|	  |	ユーザー
z-index:  canvas  -1	0    1	  2

スタックコンテキストの背景と最も負の位置のスタックコンテキストは、スタックの下部にあり、一方最も正の位置のスタックコンテキストはスタックの最上位にある。

別の内側に含まれる場合はキャンバスは透明であり、そうでない場合はユーザーエージェント定義の色が与えられる。範囲内で無限大であり、かつルート要素を含む。初めに、ビューポートは、キャンバスの原点で左上隅で固定される。

スタックコンテキスト（ 'z-index'プロパティを参照）を生成する要素の子孫の塗装順序は次のとおり：

要素がルート要素である場合：
1. 全キャンバス上の要素の背景色。
2. ルート要素に塗装された場合、全キャンバスの上に、使用される原点に固定される要素の背景画像。
要素が、ブロック、リスト項目、または他のブロックと等価である場合：
1. ルート要素である場合を除き、要素の背景色。
2. ルート要素である場合を除き、要素の背景画像。
3. 要素のボーダー。
そうでなければ、要素がブロックレベルのテーブルである場合：
1. ルート要素である場合を除き、テーブルの背景（色、次に画像）。
2. 列グループの背景（色、次に画像）。
3. 列の背景（色、次に画像）。
4. 行グループの背景（色、次に画像）。
5. 行の背景（色、次に画像）。
6. セルの背景（色、次に画像）。
7. すべてのテーブルのボーダー（分離ボーダーによるツリー順で）。
z-index順（最も負のものが最初）でz-index（0を除く）とともに配置される子孫によって形成されるスタックコンテキスト、次にツリー順。
要素が、ブロック、リスト項目、または他のブロックと等価である場合、ツリーの順でほとんどすべてのフロー内、非配置、ブロックレベルの子孫：
1. 要素の背景色。
2. 要素の背景画像。
3. 要素のボーダー。
そうでなければ、要素がテーブルである：
1. テーブルの背景（色、次に画像）。
2. 列グループの背景（色、次に画像）。
3. 列の背景（色、次に画像）。
4. 行グループの背景（色、次に画像）。
5. 行の背景（色、次に画像）。
6. セルの背景（色、次に画像）。
7. すべてのテーブルのボーダー（分離ボーダーによるツリー順で）。
ツリー順で、すべての非配置浮動子孫。これらのいずれかそれぞれについて、あたかも新しいスタックコンテキストを作成したかのように要素を扱うが、任意の配置される子孫および実際に新しいスタックコンテキストを作成する子孫は、新しいスタックコンテキストではなく、親スタックコンテキストの一部と見なされるべきである。
要素がスタックコンテキストを生成するインライン要素である場合：
1. 要素であるそれぞれの行ボックスの場合：
  1. その行ボックスにおける要素のボックスに対して7.2.1にジャンプする（ツリー順に）。
そうでなければ、最初に要素に対して、次にすべてのフロー、非配置、ブロックレベルの子孫のツリー順に：
1. 要素がブロックレベル置換要素の場合、分割不能な置換コンテンツ。
2. そうでなければ、その要素の各行ボックスに対して：
  1. その行ボックスで、ツリー順でその要素の子である各行ボックスに対して：
    1. 要素の背景色。
    2. 要素の背景画像。
    3. 要素のボーダー。
    4. インライン要素に対して：
      1. すべての要素のフロー内、非配置、この行のボックスにあるインラインレベルの子、この行のボックス上にある要素内のテキストのすべての実行、ツリーの順序で：
        
        これがテキストの続きである場合：
        
        下線を適用する要素のツリー順で、要素のテキストに影響を与える下線（もしあれば、最も深い要素の下線が最上位で描かれ、かつ、もしあれば、ルート要素の下線が上記の手順でなく、一番下で描画されるような）。
        上線を適用する要素のツリー順で、要素のテキストに影響を与える上線（もしあれば、最も深い要素の上線が最上位で描かれ、かつ、もしあれば、ルート要素の上線が一番下で描画されるような）。
        テキスト。
        中央線を適用する要素のツリー順で、要素のテキストに影響を与える中央線（もしあれば、最も深い要素の中央線が最上位とルート要素の中央線を描かれているような、もしあれば、一番下の描画されるような）。
        
        そうでなければ、その要素に対して7.2.1にジャンプする。
      インラインブロックおよびインラインテーブル要素に対して：
      1. これらのいずれかそれぞれについて、あたかも新しいスタックコンテキストを作成したかのように要素を扱うが、任意の配置される子孫および実際に新しいスタックコンテキストを作成する子孫は、新しいスタックコンテキストではなく、親スタックコンテキストの一部と見なされるべきである。
      インラインレベル置換要素に対して：
      1. 分割不能な、置換コンテンツ。
    ボックスの一部は、行分割またはUnicode双方向アルゴリズムによって生成されていてもよい。
  2. 必要に応じて、要素のアウトライン（下記10を参照）。
3. 必要に応じて、要素がブロックレベルであれば、要素のアウトライン（下記10を参照）。
ツリー順で、'z-index: auto'または 'z-index: 0'をもつすべての配置子孫。'z-index: auto'をもつ子孫に対して、あたかも新しいスタックコンテキストを作成したかのように要素を扱うが、任意の配置される子孫および実際に新しいスタックコンテキストを作成する子孫は、新しいスタックコンテキストではなく、親スタックコンテキストの一部と考慮されるべきである。'z-index: 0'をもつこれらに対して、分割不能な生成スタックコンテキストを扱う。
z-index順（最小が最初）で1以上のz-indexをもつ配置される子孫によって形成されるスタックコンテキスト。
最後に、上記の手順でアウトラインを描画しない実装は、この段階でこのスタックコンテキストからアウトラインを描画しなければならない。（上記の手順でなく、この手順でアウトラインの描画を推奨する。）

E.3 ノート

ルート要素の背景は、全体のキャンバスの上に一度だけ描かれる。

双方向のインラインの背景はツリー順で描かれる一方、視覚的な順序で配置される。インライン背景の配置はCSS 2.2で指定されないので、これら2つの要件の正確な結果は、ユーザーエージェント定義である。CSS3は、詳細にこれを定義するかもしれない。