type
status
date
slug
summary
tags
category
icon
password
要解答这个问题，我们可以从这几个渠道获取答案：
  • W3C 规范
  • WebKit 源码
  • Chromium 源码

W3C 规范

准确的来讲，W3C 自己没有整理测试，他是直接借用 WPT（WebPlatformTests） 这个组织的成果，不过这个组织从代码来看前身是 HTML Group。
WPT 是一个致力于提供跨浏览器的 Web 技术栈测试用例的组织。目前这个组织已经积累了非常多的测试用例，都保存在 github/wpt 这个仓库中。他的测试有多种类型，其中和 CSS 最为息息相关的就是 Rendering Test。这部分的测试都放在 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 来说并不需要，不确定为什么放这个
除了这三个文件夹，其他的每一个文件夹都对应了 W3C 的一个 CSS 相关的草案，具体对应关系可以在每个文件夹下的 META.yml 中查看。
那么每一个测试用例内部是怎么组成的？
首先需要了解的是，一个测试用例一般可能是这几种（根据判定他们正确与否的方式进行划分）：
  • Rendering test
    • Reftest：在测试文件中提供另一个没有使用当前技术的 html 文件，然后判定两个文件的渲染结果是否相同
    • Visual test：通过人的视觉或者通过和之前的截图进行对比，一般这种测试会在文件名称的最后（后缀之前）加上 -visual
  • JS 测试：使用自己的一个叫做 javascriptharness 的库来判定结果正确与否
不过这两种测试在本质上形式是差不多的，根据 Writing a refset 就可以大致知道其结构，来看一个典型的测试文件：
这个文件中，主要分成这几个部分：
  • title：很简单
  • link help：表示他对应的用例
  • link match：作为对比的另一个文件
  • meta assert：表示出错时的提示
  • 测试内容：一般都要求是可自解释的

测试中的 flags 含义解释

Ahem

Ahem 是一个专门用于浏览器测试的字体，他的特点在于一些特定的字符都是特定的形状，具体的解释可以在 GitHub - Kozea/Ahem: A dummy font often used in W3C tests 的 README 中了解。
凡是标记了 Ahem 的测试，都是需要使用 Ahem 字体才能有正确表现的。所以在查看测试的执行过程之前，需要先从 Github 上下载字体文件并安装（macOS 直接打开 ttf 文件就可以了）
 
相关文章
WebKit 源码调试指南
浏览器是如何生成 RenderObject 的
如何实现 Flow 布局？
浏览器是如何生成 RenderObject 的如何实现 Flow 布局？