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では、テスト内容とはまったく別に絶対配置されたボックスの位置が間違っていて赤い部分が見えてしまっていました。
r2054
r2032で絶対配置されたボックスのスタティック ポジションの計算を単純化した際に修正ミスがあったので、r2055で修正しています。
r2055
・abspos-containing-block-005 絶対配置されたボックスの包含ブロックが初期包含ブロックになっている場合のテストです。r2055では、8.3.1で禁止されているルート要素のマージンまでつぶしてしまっていて、赤い部分が見えてしまっています。
r2055
r2056でルート要素のマージンはつぶさないように修正しています。
r2056
・containing-block-031 このテストはインラインレベルボックスを起点に絶対位置を指定してボックスを配置するテストです。r2056では、絶対配置の処理ではなくて、また行末の空白処理のバグのために赤い文字(Ahemフォント)が見えてしまっています。
r2056
今回は1文字もラインボックスに収まらなかったわけではなくて、テキストの1部分は収まってその次の単語も実は空白を削除すれば収まった、というケースです。CSSモジュールの実装側で対応しているとこれからもこぼれがいろいろ出てきそうなので、r2057ではFontTextureクラスの実装から修正しました。
r2057
・abspos-containing-block-initial-004a このテストはHTML要素自体が絶対配置されている場合のテストです。r2057では、HTMLパーサーのバグでhtml要素に直接指定されたstyle属性がDOMツリーに登録されていなかったために単に空のHTMLドキュメントのような表示になってしまっていました。
r2057
ESウェブブラウザのHTMLパーサーのテストには、html5libのテストデータを使っているのですが、最後にテストを行ってから割と時間も経っているので、また一度テストしておいた方が良さそうです。
r2058
r2058でまずHTMLパーサーのバグを修正して、本来のテストをできるようにしました。r2058では、左上部分が白色のままで背景色を適用できていませんでした。
r2059
r2059でHTML要素自体が絶対配置されている場合でも背景を正しく塗りつぶせるように修正しました。・abspos-containing-block-initial-009b このテストもHTML要素自体が絶対配置されている場合のテストで、サイズを初期包含ブロックからのパーセンテージで計算するバージョンです。
r2059
r2059までは、ルート要素が絶対配置されているときにも、絶対配置されていない場合の要素のようにレイアウトしてしまっていておかしなことになっていました。
r2060
r2060で修正しています。・float-non-replaced-width-008 このテストの詳細については、HTMLファイルの中に詳しい説明が書かれています。フローティング ボックスにshrink-to-fitを適用した場合、そのあとで改めてmax-widthをチェックする必要があるというわけです。
r2060
r2060まではそのようなチェックをしていなかったので、r2061で修正しています。
r2061
・block-non-replaced-width-001 前回、インラインレベル中で絶対配置されたブロック要素のスタティック ポジションの修正を行いましたが、絶対配置された要素がブロックならどのみちスタティック ポジションは改行した位置でないといけません。
r2061
r2062でr2061のバグも合わせて修正しています。
r2062
・block-non-replaced-width-002 このテストの本来のポイントはオレンジとブルーのボックスの幅が同じになるかどうか、という点なのですが、r2062では、その点ではなくてr2061の修正で匿名ボックスについてまで不要なスタイルの計算してしまっていたバグがあって垂直方向の位置が揃っていません。
r2062
r2063で修正しています。
r2063
・abspos-008 このテストも本来の目的と無関係に、テキストがボックスの中に収まっていませんでした。
r2063
line-heightの計算値と解決値の取扱いに間違いがあって、解決値を継承するようになってしまっていました。
r2064
r2064で修正しています。line-heightについては、10章でテストスイートが用意されているので次回以降でより詳しくテストしていきます。・inline-block-002 このバグはこれまでもどこかみたような感じです。#4のfloats-108と、#3のinlines-003で修正をしたのと同様の問題がインラインブロックの処理の方でも起きていました。
r2064
r2065でインラインブロックもフロートと同じように単純に包含ブロックから利用可能な幅を計算するように修正しています。
r2065
続いて、以前もインラインレベルボックスで似たようなバグがありましたが、途中で改行できないバグをr2066で修正しました。
r2066
・max-width-089 このテストでは、max-widthに不正な負の値を指定したときのチェックをしています。
r2066
r2067で修正しました。
r2067
補足: こういった負の値といった不正な値に関して、現在の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 このテストでは、インラインブロックのマージンの処理をテストしています。
r2067
r2067では、インラインブロックのマージントップをラインボックスのマージンとつぶしてしまうという状態になってしまっていました。
r2068
r2068で修正しています。より詳しいマージン関連の処理は次回以降で8.3.1 Collapsing marginsのテストスイートに戻ってテストを進めていきます。・block-formatting-context-height-001 絶対配置されたボックスもフォーマッティング コンテキストを作っているので(CSS 3のボックスモデルで言うところのフロールートなので)、最後に子孫のフロートのクリアランスを確保しておく必要があります。このテストはその点をテストしています。
r2068
絶対配置されたボックスはふつうのブロックレベルボックスと違う関数でレイアウトしているので、こういう個別のテストがあって助かりました。BlockLevelBox::layOut()には入っていたクリアランスの処理がBlockLevelBox::layOutAbsolute()では抜けていたのをr2069で修正しています。
r2069
この次のテストから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)があります。このテストはこの点についてテストしています。
r2070
r2071
通常のブロックボックスのmax-heightの処理ができてきたので、r2072では絶対配置されたボックスについてもmin-height, max-heightを適用するように修正しています。・absolute-non-replaced-max-height-003 このテストでは、絶対配置されたボックスのheightがmin-height, max-heightの適用で変わったあとで、きちんとマージンやy座標を更新できているかどうかをテストしています。
r2072
r2072では後処理がなかったので青いボックスが少しずれてしまっています。r2073で修正しています。すこしごちゃごちゃした修正ですが基本的には、BlockLevelBox::resolveAbsoluteWidth と同じ処理を改めて適用させているだけです。
r2073
ここまで絶対配置の処理をちょこちょこと修正してきので、9章の絶対配置に関連したテストをもう一度見直しておきました。・abspos-001 前回はこのテストは問題なかったのですが、r2075では緑色の絶対配置されているボックスの位置がずれて赤いボックスが見えてしまっていました。
r2075
これは、block-non-replaced-width-001のときの修正で隠れていたバグ(スタティック ポジションの計算が正しくない)が露見した感じです。r2076で修正しています。
r2076
以上で、replaced element, line-height, margin collapsing, list, table, rtl, bidi を除くと、8章から10章まで一通りテストができました。max-width, shrink-to-fit関連でまだ少しエラーが残っているのですが、次回からはここまでテストをスキップしてきた部分についても実装とテストを進めていく予定です。