Onee's Space
テクノロジー

ブラウザはどのようにCSSテストを実装しているのか？

御姉 avatar
御姉
·
Cover for ブラウザはどのようにCSSテストを実装しているのか？

この質問に答えるために、以下のソースから情報を得ることができます：

  • W3C仕様
  • WebKitソースコード
  • Chromiumソースコード

W3C仕様

正確に言えば、W3Cは自身でテストを整理していません。HTMLグループから発展したと思われるWPT（WebPlatformTests）組織の成果を直接利用しています。

WPTは、クロスブラウザのWebテクノロジースタックのテストケースを提供することに専念している組織です。現在、この組織は多数のテストケースを蓄積しており、すべてgithub/wptリポジトリに保存されています。テストにはさまざまな種類がありますが、その中でもRendering TestがCSSと最も密接に関連しています。これらのテストはcssディレクトリに配置されています。

さらに、W3Cは独自の仕様セクションに従って、これらのテストケースを対応する章と関連付けています。これらのテストはCSS Test Harnessで確認できます。

WebKitのアプローチ

CSS関連のテストは以下のディレクトリに集中しています：

また、WebKitはWPTからいくつかのテストを採用しており、具体的な方法はWebKitW3CTestingで言及されています。これらのファイルはLayoutTest/imported/w3cディレクトリに保存されています。

Chromiumのアプローチ

Chromiumのアプローチは、WPTの作業結果を利用できる仕組みを確立することです。メンテナはWPTからテストをインポートし、独自のテストを追加した後、上流のWPTリポジトリでPRを作成できます（ImportとExportを参照）。

インポートされたファイルはここにあります。

W3C仕様下のテストケースの詳細

テストケースはcssディレクトリに集中しており、CSSWGのCSS関連のすべてのテストケースが含まれています。このディレクトリには注目すべきいくつかのフォルダがあります：

  • support：グローバルサポートファイル（画像やスタイルシートを含む）。他のテストの内部サポートファイルは、それぞれのフォルダのsupportディレクトリに保存されています
  • vendor-imports：W3Cの古い標準からのテスト（Mozillaの時代のものと思われる）
  • tools：主にCSSテストケースの構築とPythonのHTTPライブラリ用。CSSには必要ないが、なぜここに配置されているかは不明

これら3つのフォルダ以外の各フォルダは、W3CのCSS関連のドラフトに対応しており、具体的な対応関係は各フォルダ内のMETA.ymlで確認できます。

では、各テストケースは内部でどのように構成されているのでしょうか？

まず、テストケースは一般的に以下の種類に分類できます（正しさを判断する方法に基づいて分類）：

  • レンダリングテスト
    • Reftest：テストファイルに現在の技術を使用しない別のHTMLファイルを提供し、両方のファイルのレンダリング結果が同一かどうかを判断
    • ビジュアルテスト：人間の目視または以前のスクリーンショットとの比較で判断。このようなテストは通常、ファイル名の最後（拡張子の前）に”-visual”が追加されます
  • JSテスト：javascriptharnessと呼ばれる独自のライブラリを使用して結果の正しさを判断

ただし、これら2種類のテストは形式的には基本的に似ています。Writing a refsetによると、その構造を理解できます。典型的なテストファイルを見てみましょう：

<!DOCTYPE html>
<meta charset="utf-8">
<title>BDO element dir=rtl</title>
<link rel="help" href="<https://html.spec.whatwg.org/#the-bdo-element>">
<link rel="match" href="rtl-ref.html">
<meta name="assert" content="BDO element's DIR content attribute renders corrently given value of 'rtl'.">

<p>Test passes if WAS is displayed below.</p>
<bdo dir="rtl">SAW</bdo>

このファイルは主に以下の部分で構成されています：

  • title：説明不要
  • link help：対応するテストケースを示す
  • link match：比較用の別ファイル
  • meta assert：エラー発生時のプロンプトを表示
  • テスト内容：一般的に自己説明的であることが要求される

テストのフラグの説明

Ahem

Ahemはブラウザテスト用に特別に設計されたフォントで、特定の文字が特定の形状を持つという特徴があります。詳細な説明はGitHub - Kozea/Ahem: A dummy font often used in W3C testsのREADMEで確認できます。

Ahemとマークされたテストは、正しく表示するためにAhemフォントが必要です。したがって、テストの実行プロセスを確認する前に、まずGithubからフォントファイルをダウンロードしてインストールする必要があります（macOSでは、ttfファイルを開くだけで十分です）

すべての記事に戻る