Shiki’s Weblog

ESウェブブラウザ通信 - CSS 2.1 Test Suite #21

2012/03/23 #ESウェブブラウザ通信

前回まででCSS 2.1テストスイートの達成率は約89%まで来ていました。今回は当面の目標としていた達成率90%を突破するところまで報告していきます。

匿名テーブルボックスの処理

table-anonymous-objects-155
このテストでは、空でないテキスト ノードが現れた時点で一度匿名のテーブルを閉じないといけません。

r2551r2551

r2552でその点を修正し、また再描画がかかるようにいつも通り暫定的にDOMCharacterDataModifiedイベントを実装しています。

r2552r2552

table-anonymous-objects-161
このテストでは、row-groupの処理中に匿名のテーブル行を生成した場合のテーブル行の改行処理ができていない場合がありました。

r2552r2552

r2553で修正しています。

r2553

結合ボーダー モデルのテスト

collapsing-border-model-003

このテストでは、テーブルのセルや行のheightプロパティーの設定をセルの高さとしてまだ処理してしまっていた箇所が見つかりました。

r2553r2553

r2554で修正しています。

r2554r2554

collapsing-border-model-004
このテストは仕様書17.6.2の、

Also, in this model, a table does not have padding (but does have margins).

という、結合ボーダーモデルではテーブルはパディングをもたない、という点をテストしています。

r2554r2554

r2555で修正しています。

r2555r2555

collapsing-border-model-005
このテストは仕様書17.6.2の、

UAs must compute an initial left and right border width for the table by examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell's collapsed left border, and the right border width of the table is half of the last cell's collapsed right border. If subsequent rows have larger collapsed left and right borders, then any excess spills into the margin area of the table .

という箇所の 太字 で示した部分のテストです。 『はみ出した左右のボーダーの幅は、テーブルのマージン領域にあふれる』というのを前回は、

r2542で、テーブル ボックスからはみ出たボーダーの幅は、テーブル ラッパー ボックスのマージンとつぶし合うようにしています。

と解釈して実装しました。一方、このテストではHTMLファイル中に、

Borders that spill into a table margin can overflow that table's container.

と、ボーダーはテーブル ラッパー ボックスの外側にあふれるかもしれない、と記載しています。そして、このテストでは、実際にテーブル ラッパー ボックスの外側に左右のボーダーがあふれることが成功条件になっています。

r2555r2555

r2556で修正しています。r2542はちょっと凝りすぎだったわけです。

r2556r2556

より複雑なテーブルのテスト

table-anonymous-block-005
テーブルのpositionに'relative'を設定しているテストです。r2556ではスタイルを共有しているテーブル ラッパー ボックスとテーブル ボックスの両方でpositionが有効な状態になっていて崩れていました。positionが有効なのはテーブル ラッパー ボックスの方です。

r2556r2556

r2557で修正しています。

r2557r2557

table-anonymous-block-018
このテストでは、青とオレンジのボックス間の距離については合っています。ただ、青とオレンジのボックスのベースラインが揃っていません。

r2557r2557

r2557では仕様書17.5.3の、

If a row has no cell box aligned to its baseline, the baseline of that row is the bottom content edge of the lowest cell in the row.

という仕様が未実装でした。r2561でこの仕様を実装したほか、それまでにvertical-align関連のバグを合わせて修正しています。

r2561r2561

table-layer-transparency-003
前回、セルの階層的な背景の描画にひとまず対応しましたが、このテストではさらにセルがスパンしている場合をテストしています。

r2561r2561

前回の実装のバグの修正も含めて、r2562で対応しています。

r2562r2562

background-root-003

このテストではルート要素がテーブルになっています。この場合、テーブルのbackgroundに指定している色でキャンバス全体を塗りつぶす必要があります。

r2569r2569

r2570で対応しました。

r2570r2570

より複雑な'outline'の処理

outline-color-applies-to-008
このテストではインライン要素のアウトラインの描画をテストしています。

r2563r2563

r2564ではインライン要素から生成されるボックスが1行に収まっているような場合に関して対応しました。

r2564r2564

outline-color-applies-to-012
このテストではインライン ブロック要素のアウトラインの描画をテストしています。

r2564r2564

r2565で対応しました。

r2565r2565

outline-color-175
このテストは本来はoutlineの設定を'inherit'にして動作するかを調べているのですが、r2565では違う理由で失敗していました。

r2565r2565

このテストでoutlineを設定している上側のボックスのpositionには'relative'が設定されているので、このボックスは別のスタッキング コンテキストを構築します。r2465での問題は、このようなスタッキング コンテキストのトップレベルにあるボックスのアウトラインを描画できない、というものでした。

r2566r2566

r2566で修正しています。
outline-applies-to-001
このテストはtable-row-groupのアウトラインの描画をテストしています。

r2566r2566

r2567でテーブルの行および行グループのアウトラインに対応しました。なおoutlineプロパティはテーブルの列および列グループに対しては無効です。

r2567r2567

outline-applies-to-007
このテストはテーブル セルのアウトラインの描画をテストしています。

r2567r2567

r2568で テーブル セルのアウトラインに対応しました。

r2568r2568

outline-layout-004
このテストでは、ひとつのインライン要素からインライン ボックスが複数行にまたがって生成された場合のoutlineの描画をテストしています。
この処理は難しい面があって、モジラのBug 266122を見ると、もう8年近く議論が続いていることがわかります。'outline'自体があまり使われていない、ということかもしれないですね。このテストに関してはWebKitのようなレンダリングが正しくて、現状のFirefoxのレンダリングは正しくありません。

r2568r2568

r2568のように何も変化がないよりはよいので、r2569では、実装の容易な現状のFirefoxのようなスタイルでアウトラインを描画しています。

r2569r2569

正しいレンダリングでは、途中の行間の緑色の線は引いてはいけません。この点も直せないことはないと思いますが、今回は優先度的にここまでにしておいて、今後の課題としておきます。

リグレッション

background-bg-pos-205
これは#17で宿題にしておいたテストで、マイナスの下マージンが使われていると、最下部までスクロールできない、という問題が残っていました。

r2570r2570

r2571で再びマイナスの下マージンを考慮してスクロールできるようにしました。

r2571r2571

またr2571でスクロールはできるようになったのですが、本来黄色のボックスの右上すぐに表示されるはずのオレンジ色のルート要素の背景画像がまだ表示されていません。r2572でルート要素の背景の表示処理のバグを修正しています。

r2572r2572

Acid2

前回のr2518がAcid2テストでリグレッションを起こしていました。空のリスト アイテムについて、空のインライン要素のように処理して生成されるボックスに高さを持たせる、という修正でした。この処理自体は仕様書に書かれているわけではなくて、他のブラウザの動きから想像したものですがどこか間違っている、ということになります。

ちなみにr2518の修正がAcid2に影響するのは、Acid2の最後の14行目で空のリスト項目が使われているためです。このリスト項目から作られるボックス中に空のインライン ボックスが追加されることで、そのボックスを含むテーブルのセルのベースラインが変わります。その結果、テーブルのvertical-alignの処理でリストの位置がずれてr2575のようなレイアウトの崩れにつながっています。

r2575r2575

空のリスト項目のボックスの高さは結局どこから出てくるのかと言うことになるのですが、Acid2に関して言えば、空のリスト項目の要素にheightプロパティーが設定されています。r2578では、空のリスト項目に'auto'以外のheightが設定されていれば特別な処理をしないように修正しています。期待される正確な処理については改めて調べておくことにします。

r2578r2578

まとめ

今回でCSS 2.1テストスイートの達成率は90.1%となりました(より詳細はこちらに)。Internet Explore 9やFirefoxには追い付いていませんが、rtl, bidiが未サポートという点を考慮すると、かなり標準に沿った実装になってきていると思います。昨年の9月末から21回にわたってES ウェブ ブラウザでのCSS 2.1の実装について報告してきたわけですが、ひとまず今回でCSS 2.1の集中実装期間は終わりになります。
次回からは、ESウェブ ブラウザの最初のリリースに向けてCSS以外の機能の実装に重点を移して行きます。まずはWeb IDLの最新の仕様へのキャッチアップとWeb IDLのC++11バインディングの改良を予定しています。また、CSSの実装についても、何か改善があればその都度このブログで報告していこうと思います。