- Two files: Test file + Reference file
- Test file uses the feature you're testing
- Reference file is an exact visual match without using the feature you're testing
- Self-describing (works both manually and with automation)
- Cross-browser & cross-platform
Basic test for the transform property described in the CSS3 Transforms spec using the translate()
function
Spec Links:
http://www.w3.org/TR/css3-transforms/#transform-property
http://www.w3.org/TR/css3-transforms/#two-d-transform-functions
Test file
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: transform property with translate function</title>
. . .
Reference file
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Reference file</title>
. . .
Test file
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="author" title="Your Name" href="mailto:youremail@address.com">
. . .
Reference file
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="author" title="Your Name" href="mailto:youremail@address.com">
. . .
Test file only
<!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">
. . .
Test file only
<!DOCTYPE html>
<html>
<head>
. . .
<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
. . .
Test file only
<!DOCTYPE html>
<html>
<head>
. . .
<meta name="assert"
content="This transform moves the element by 100 pixels in both the X and Y directions.">
. . .
Test element with the transform applied
<style type="text/css">
.greenSquare {
position: absolute;
background: green;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: translate(100px,100px);
}
. . .
</style>
Reference element
<style type="text/css">
.greenSquare {
position: absolute;
background: green;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
</style>
Element is only visible when the test fails
<style type="text/css">
. . .
.redSquare {
position: absolute;
background: red;
top: 101px;
left: 101px;
width: 98px;
height: 98px;
}
</style>
Failing test example
Simple statement of how the page renders when the test passes
Test file & Reference file
<body>
<p>The test passes if there is a green square and no red.</p>
. . .
</body>
Test file
<body>
. . .
<div class="redSquare"></div>
<div class="greenSquare"></div>
</body>
Reference file
<body>
. . .
<div class="greenSquare"></div>
</body>
- You may need to add a vendor prefix to the CSS property you're testing
- If the prefix is necessary, your test will appear to fail without it
- However, do not include vendor prefixes when pushing tests to the 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;
}
We recommend a script to use during test development:
http://leaverou.github.com/prefixfree
The prefixfree.jsapi.js extension can be used for unprefixed JS APIs tests:
https://github.com/LeaVerou/prefixfree/tree/gh-pages/plugins
. . .
<-- Remember to remove before pushing to W3C test suite -->
<script src="prefixfree.js"></script>
<script src="plugins/prefixfree.jsapi.js"></script>
. . .