编写新测试

布局测试只是一个网页。布局测试机制会渲染网页,然后转储其内部表示形式(渲染树)以及布局的详细信息。这可以让项目工程师知道他们是否有任何改变布局的操作。一旦测试正确渲染,我们就会将其作为布局测试套件的一部分进行提交。

以下是编写新布局测试时需要遵循的一些指导原则:

  1. 测试应是测试该功能的最小可能代码片段。
  2. 测试应适合一页(当然,除非它正在测试滚动)。
  3. 测试应清楚地描述它正在测试的功能。
  4. 测试应清楚地描述预期结果。仅通过目视检查就应该能够确定测试是否失败。

遵循这些指导原则的布局测试示例是 fast/events/event-creation.html

布局测试应在浏览器本身和布局测试工具中都能工作。布局测试工具在 window 对象上提供了一个名为 layout test controller 的附加对象,该对象包含一些控制测试输出的方法。您应该了解的一个是 testRunner.dumpAsText 方法。在测试中从 JavaScript 调用此方法,可将输出以纯文本而不是渲染树转储的形式写入。这对于测试除布局之外的其他内容非常有用。上面提到的事件创建测试是关于如何做到这一点以及何时有意义的一个很好的例子。

有些测试需要像素级比较。对于这些测试,您必须为特定的机器类型、操作系统和颜色配置文件生成预期输出。当您添加此类测试时,可以使用 run-webkit-tests --pixel 命令自动生成新的预期输出。这将自动配置颜色配置文件,并将生成的渲染图像(和校验和)放置在相应的平台目录中以供签入。

Ahem 字体在测试文本布局时非常有用,因为它的字形指标是众所周知的,并且它始终可用于在布局测试工具中运行的测试。但是,如果您想使用自己的浏览器查看使用 Ahem 的测试,您应该下载并安装 AhemAhemExtra 字体文件到您的系统上。要在 OS X 上安装字体,请在“字体册”应用程序中打开它,然后单击“安装字体”按钮进行安装。

CSS 工作组有一份关于 CSS 测试编写指南的优秀文档。这篇 wiki 文章提供了关于编写良好测试和 DumpRenderTree 工具的更多信息。