testharness.js and testharnessreport.js
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
id="log"
should exist in test file
test(test_function, name, properties)
async_test()
is also provided by testharness for asychronous testingtest()
test()
test(test_function, name, properties)
test_function
must be an object, not a function calltest_function
will typically be one of the assert methods supplied by testharness
test(function() {assert_true(true)}, name, properties)
test(test_function, name, properties)
name
is a string that identifies the testname
should be short, unique, and must not changename
will be displayed in the test results table
test(function() {assert_true(true)}, "test_name", properties)
test(test_function, name, properties)
properties
is an object that overrides defaultstimeout
and metadata
test(function() { assert_true(true) }, "test_name",
{timeout:1000,
help: 'http://www.w3.org/TR/spec#section',
author: ['Bill Gates <bgates@msn.com>', 'Steve Jobs http://apple.com/sjobs'],
assert: 'This test something.', 'This also tests something else.'})
test_function
for test()
description
argument that is only output if the assertion fails
test()
assert_equals(actual, expected, description)
actual
: The actual value from the functionality being testedexpected
: The expected valuedescription
(optional): Output only if the assertion fails
assert_equals(getActualData("myElement"), 100, "Expected value for myElement is 100")
API 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
<head>
<title>CSS Transforms API Test: transform translate</title>
<link rel="author" title="Your Name" href="mailto:youremail@address.com">
<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">
<meta name="flags" content="dom">
<meta name="assert" content="The transform should be translate(100px,100px)">
...
</head>
dom
token in flags
metadata specifies that JavaScript is required
<head>
...
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
/resources
directory at root level
<body>
<div id="myDiv"></div>
<div id="log"></div>
<script>
// Set the transform
document.getElementById("myDiv").style.transform = "translate(100px,100px)";
// Verify that the transform was set as expected
test(function() {assert_equals(
document.getElementById("myDiv").style.getPropertyCSSValue("transform").cssText, //Actual
"translate(100px, 100px)", //Expected
"transform should be translate(100px,100px)")}, //Description
"Transform_Translate_100px_100px"); //name
</script>
</body>
myDiv
div used as test element - translate applied in JSlog
div used as container for test resultstest()
uses assert_equals
as test_function
PASS
FAIL