Shiki’s Weblog

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

2011/10/23 #ESウェブブラウザ通信

今回からW3C CSS 2.1テストスイートの10章のテストに進みます。今回は、replaced element, line-height, margin collapsing, list, table などを除いた基本的な実装の修正についてのまとめです。・anonymous-boxes-001 このテストは、パーセンテージによる長さの解決に匿名ボックスは影響しない、という点をチェックしています。r2054では、テスト内容とはまったく別に絶対配置されたボックスの位置が間違っていて赤い部分が見えてしまっていました。

r2054r2054

r2032で絶対配置されたボックスのスタティック ポジションの計算を単純化した際に修正ミスがあったので、r2055で修正しています。

r2055r2055

abspos-containing-block-005 絶対配置されたボックスの包含ブロックが初期包含ブロックになっている場合のテストです。r2055では、8.3.1で禁止されているルート要素のマージンまでつぶしてしまっていて、赤い部分が見えてしまっています。

r2055r2055

r2056でルート要素のマージンはつぶさないように修正しています。

r2056r2056

containing-block-031 このテストはインラインレベルボックスを起点に絶対位置を指定してボックスを配置するテストです。r2056では、絶対配置の処理ではなくて、また行末の空白処理のバグのために赤い文字(Ahemフォント)が見えてしまっています。

r2056r2056

今回は1文字もラインボックスに収まらなかったわけではなくて、テキストの1部分は収まってその次の単語も実は空白を削除すれば収まった、というケースです。CSSモジュールの実装側で対応しているとこれからもこぼれがいろいろ出てきそうなので、r2057ではFontTextureクラスの実装から修正しました。

r2057r2057

abspos-containing-block-initial-004a このテストはHTML要素自体が絶対配置されている場合のテストです。r2057では、HTMLパーサーのバグでhtml要素に直接指定されたstyle属性がDOMツリーに登録されていなかったために単に空のHTMLドキュメントのような表示になってしまっていました。

r2057r2057

ESウェブブラウザのHTMLパーサーのテストには、html5libテストデータを使っているのですが、最後にテストを行ってから割と時間も経っているので、また一度テストしておいた方が良さそうです。

r2058r2058

r2058でまずHTMLパーサーのバグを修正して、本来のテストをできるようにしました。r2058では、左上部分が白色のままで背景色を適用できていませんでした。

r2059r2059

r2059でHTML要素自体が絶対配置されている場合でも背景を正しく塗りつぶせるように修正しました。・abspos-containing-block-initial-009b このテストもHTML要素自体が絶対配置されている場合のテストで、サイズを初期包含ブロックからのパーセンテージで計算するバージョンです。

r2059r2059

r2059までは、ルート要素が絶対配置されているときにも、絶対配置されていない場合の要素のようにレイアウトしてしまっていておかしなことになっていました。

r2060r2060

r2060で修正しています。・float-non-replaced-width-008 このテストの詳細については、HTMLファイルの中に詳しい説明が書かれています。フローティング ボックスにshrink-to-fitを適用した場合、そのあとで改めてmax-widthをチェックする必要があるというわけです。

r2060r2060

r2060まではそのようなチェックをしていなかったので、r2061で修正しています。

r2061r2061

block-non-replaced-width-001 前回、インラインレベル中で絶対配置されたブロック要素のスタティック ポジションの修正を行いましたが、絶対配置された要素がブロックならどのみちスタティック ポジションは改行した位置でないといけません。

r2061r2061

r2062でr2061のバグも合わせて修正しています。

r2062r2062

block-non-replaced-width-002 このテストの本来のポイントはオレンジとブルーのボックスの幅が同じになるかどうか、という点なのですが、r2062では、その点ではなくてr2061の修正で匿名ボックスについてまで不要なスタイルの計算してしまっていたバグがあって垂直方向の位置が揃っていません。

r2062r2062

r2063で修正しています。

r2063r2063

abspos-008 このテストも本来の目的と無関係に、テキストがボックスの中に収まっていませんでした。

r2063r2063

line-heightの計算値と解決値の取扱いに間違いがあって、解決値を継承するようになってしまっていました。

r2064r2064

r2064で修正しています。line-heightについては、10章でテストスイートが用意されているので次回以降でより詳しくテストしていきます。・inline-block-002 このバグはこれまでもどこかみたような感じです。#4のfloats-108と、#3のinlines-003で修正をしたのと同様の問題がインラインブロックの処理の方でも起きていました。

r2064r2064

r2065でインラインブロックもフロートと同じように単純に包含ブロックから利用可能な幅を計算するように修正しています。

r2065r2065

続いて、以前もインラインレベルボックスで似たようなバグがありましたが、途中で改行できないバグをr2066で修正しました。

r2066r2066

max-width-089 このテストでは、max-widthに不正な負の値を指定したときのチェックをしています。

r2066r2066

r2067で修正しました。

r2067r2067

補足: こういった負の値といった不正な値に関して、現在のESウェブブラウザではCSSパーサーの段階ではエラーとしていなくて、プロパティを評価する際にチェックするようになっています。この方法だと、height-089のように"height: 0; height: -1%;"のような書き方をされた場合に対応できない、という問題があります。ただ、height-089には"invalid"フラグ("test is invalid; report error to public-css-testsuite"という意味のようです)が立てられているので、それほど緊急な問題でもないのかな、と。・inline-block-non-replaced-height-002 このテストでは、インラインブロックのマージンの処理をテストしています。

r2067r2067

r2067では、インラインブロックのマージントップをラインボックスのマージンとつぶしてしまうという状態になってしまっていました。

r2068r2068

r2068で修正しています。より詳しいマージン関連の処理は次回以降で8.3.1 Collapsing marginsのテストスイートに戻ってテストを進めていきます。・block-formatting-context-height-001 絶対配置されたボックスもフォーマッティング コンテキストを作っているので(CSS 3のボックスモデルで言うところのフロールートなので)、最後に子孫のフロートのクリアランスを確保しておく必要があります。このテストはその点をテストしています。

r2068r2068

絶対配置されたボックスはふつうのブロックレベルボックスと違う関数でレイアウトしているので、こういう個別のテストがあって助かりました。BlockLevelBox::layOut()には入っていたクリアランスの処理がBlockLevelBox::layOutAbsolute()では抜けていたのをr2069で修正しています。

r2069r2069

この次のテストから10.4のテストに進んでいます。max-heightはいままでサポートしていなかったので簡単な実装をr2070で追加しています。・max-height-percentage-002 このテストのHTMLファイル中にも記載されていますが、min-height、max-heightをパーセンテージで指定した場合には、

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height' )or 'none' (for 'max-height' ).

という規則(10.7)があります。このテストはこの点についてテストしています。

r2070r2070

r2071,r2074でこの点について修正しています。

r2071r2071

通常のブロックボックスのmax-heightの処理ができてきたので、r2072では絶対配置されたボックスについてもmin-height, max-heightを適用するように修正しています。・absolute-non-replaced-max-height-003 このテストでは、絶対配置されたボックスのheightがmin-height, max-heightの適用で変わったあとで、きちんとマージンやy座標を更新できているかどうかをテストしています。

r2072r2072

r2072では後処理がなかったので青いボックスが少しずれてしまっています。r2073で修正しています。すこしごちゃごちゃした修正ですが基本的には、BlockLevelBox::resolveAbsoluteWidth と同じ処理を改めて適用させているだけです。

r2073r2073

ここまで絶対配置の処理をちょこちょこと修正してきので、9章の絶対配置に関連したテストをもう一度見直しておきました。・abspos-001 前回はこのテストは問題なかったのですが、r2075では緑色の絶対配置されているボックスの位置がずれて赤いボックスが見えてしまっていました。

r2075r2075

これは、block-non-replaced-width-001のときの修正で隠れていたバグ(スタティック ポジションの計算が正しくない)が露見した感じです。r2076で修正しています。

r2076r2076

以上で、replaced element, line-height, margin collapsing, list, table, rtl, bidi を除くと、8章から10章まで一通りテストができました。max-width, shrink-to-fit関連でまだ少しエラーが残っているのですが、次回からはここまでテストをスキップしてきた部分についても実装とテストを進めていく予定です。