Test the Web Forward
リファレンステストの書き方
Reftest 概要
- ファイルは２つ：テスト用とリファレンス用
- テスト用：テストされる機能を利用する
- リファレンス用：別の機能で同じ表示をする
- 手動テストも自動テストも対応する
- ブラウザ・プラットフォームに依存しない
必須メタデータ: Title
テストファイル
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: transform property with translate function</title>
. . .
リファレンスファイル
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Reference file</title>
. . .
必須メタデータ: Author
テストファイル
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="author" title="Your Name" href="mailto:youremail@address.com">
. . .
リファレンスファイル
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="author" title="Your Name" href="mailto:youremail@address.com">
. . .
必須メタデータ: Spec Links
テストファイルのみ
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css3-transforms/#two-d-transform-functions">
. . .
必須メタデータ: Reference File Path
テストファイルのみ
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
. . .
必須メタデータ: Assertion
テストファイルのみ
<!DOCTYPE html>
<html>
<head>
. . .
<meta name="assert"
content="This transform moves the element by 100 pixels in both the X and Y directions.">
. . .
テストエレメント
トランスフォームかけられた状態のエレメント
<style type="text/css">
.greenSquare {
position: absolute;
background: green;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: translate(100px,100px);
}
. . .
</style>
トランスフォームをかけないリファレンス エレメント
<style type="text/css">
.greenSquare {
position: absolute;
background: green;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
</style>
見た目でわかるフェールケース
テストがフェールする場合に見えるエレメント
<style type="text/css">
. . .
.redSquare {
position: absolute;
background: red;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
</style>
テストがフェールした場合
説明文
テストのパス条件を簡単に説明する文章
テスト・リファレンスファイル両方
<body>
<p>The test passes if there is a green square and no red.</p>
. . .
</body>
エレメントの追加
テストファイル
<body>
. . .
<div class="redSquare"></div>
<div class="greenSquare"></div>
</body>
リファレンスファイル
<body>
. . .
<div class="greenSquare"></div>
</body>
ベンダープレフィックス
- CSS機能によってベンダープレフィックスが必要
- プレフィックスがないとテストのパスケースが確認できない場合に使う
- ただし、テストケースをW3Cに提出する前にプレフィックスを外すこと
.greenSquare {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
-webkit-transform: translate(100px,100px);
-moz-transform: translate(100px,100px);
-ms-transform: translate(100px,100px);
-o-transform: translate(100px,100px);
background: green;
}
