Shiki’s Weblog
ESウェブブラウザ通信 - Acid2テスト #3
2012/06/12 #ESウェブブラウザ通信
今回はAcid2テストの最終回です。今年2月末の時点では、データURLなし版のAcid2テスト(002-no-data)を表示できるようにするところまで進めていました。今回は、正式なAcid2テストにESウェブブラウザがパスするようになったので、その報告です。
データ URL スキームのサポート
データURLスキームは、通常は別ファイルにしておくような画像データなどをウェブ ページ中に含めてしまうことを可能にするもので、RFC 2397で規定されています。Acid2のガイドページでは、
Data URLs aredescribed inHTML4 but is less used due to lack of support. We believe data URLs are convenient and useful for web designers, and easy to add in browsers.
という記載があります。ただデータURLの利点とされている点は、いま見てみるとSPDYなどでより本質的に改善できる部分のようにも見えて、 "convenient and useful" というのは"当時は"という感じがしなくもないですね。ESウェブブラウザでは、r2765からデータURLスキームに対応しました。 ESウェブブラウザ内部での動作としては、データURLスキームから生成したデータを通常のHTTPリソースと同様に一時ファイルに書き込んで処理しています。なんとなくオンメモリで処理されそうな印象があるかもしれませんが、実際には "easy to add" という意味ではこういったHTTPと大差ない実装が一番工数が少ないように思います。
r2765
Acid2テストに関しても、r2765からは上図のようにデータURLを使用して埋め込まれている画像やスタイルシートも反映して描画できるようになりました。
:hover 処理の修正
前々回のこのブログで取り上げた:hover擬似クラスの処理でいくつかバグが残っていて、Acid2テストで使用しているホバーリング効果がr2765の時点では効いていませんでした。Acid2で使用している:hover擬似要素は次のようなもので、
.nose :hover div { border-color: blue; } .nose div:hover :before { border-bottom-color: inherit; } .nose div:hover :after { border-top-color: inherit; }
親要素がホバーリングされている状態や、:before, :after擬似要素との組み合わせといった結構込み入ったものになっています。具体的には、スマイリーの鼻のあたりにマウスを移動させると、ボーダーを使って表現されている鼻の部分が青色に変わります。
r2769
r2766からr2769までの一連の変更で:hover処理のバグを修正しています。上図はr2769でマウスを鼻の部分に移動させた時のスクリーンショットです。色が変わっているのに気づくでしょうか?
まとめ
以上で、今年2月から開始したAcid2テストについては、リファレンス画像にも合致し、ホバーリングにも対応できましたので、今回で合格としたいと思います。メジャーブラウザの中で、一番最初にAcid2に合格したSafariから遅れること約7年、一番最後にAcid2に合格したIE8からも遅れること約4年というところです。とは言え、ESウェブブラウザの開発自体をはじめてからまだ2年足らずですので、まずまずといったところでしょうか。なお、Acid2に合格することの意味合い、ということについては『ADP: Acid2テストの功罪』にうまくまとめられている通りだと思います。Acid2 ガイドでも、
Acid2 tries to change this by challenging browsers to render Acid2 correctly before shipping.
とあるので、ブラウザを出荷する前にこのテストくらいにはパスしておいてほしい、という期待(2005年当時)であったことが読み取れます。現在であれば、CSS 2.1適合性テストスイートの達成率を見た方がCSS 2.1への準拠度などはより正しく見積もることができますし、Acidテストについてもその役割はAcid3に移っています。そういうわけで、ESウェブブラウザにはまだまだ課題が多く残っていますけれども、最初のリリースに向けてはひとつ少し大きなテストをクリアできたようには思います。