Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that disables it given conditions:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/pseudo-elements-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: Transitioning Pseudo Elements</title>
<meta name="assert" content="Test checks that transitions are run on pseudo elements">
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
<link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
<link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/">
<meta name="flags" content="dom">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
<script src="./support/helper.js" type="text/javascript"></script>
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
<script src="./support/properties.js" type="text/javascript"></script>
<style type="text/css">
#offscreen {
position: absolute;
top: -100000px;
left: -100000px;
width: 100000px;
height: 100000px;
}
</style>
</head>
<body>
<!-- required by testharnessreport.js -->
<div id="log"></div>
<!-- elements used for testing -->
<div id="fixture" class="fixture">
<div class="container">
<div class="transition">Text sample</div>
</div>
</div>
<div id="offscreen"></div>
<!--
SEE ./support/README.md for an abstract explanation of the test procedure
-->
<script>
// this test takes its time, give it a minute to run
var timeout = 60000;
setup({timeout: timeout});
var tests = [
{
name: "transition padding-left on :before",
pseudo: 'before',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '""'},
to: {'padding-left': '10px'}
}, {
name: "transition padding-left on :after",
pseudo: 'after',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '""'},
to: {'padding-left': '10px'}
}, {
name: "transition padding-left on :before, changing content",
pseudo: 'before',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '"1"'},
to: {'padding-left': '10px', 'content': '"2"'}
}, {
name: "transition padding-left on :after, changing content",
pseudo: 'after',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '"1"'},
to: {'padding-left': '10px', 'content': '"2"'}
}
];
// general transition-duration
var duration = '2s';
runParallelAsyncHarness({
// array of test data
tests: tests,
// the number of tests to run in parallel
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// prepare individual test
setup: function(data, options) {
generalParallelTest.setup(data, options);
var styles = {};
styles['.fixture'] = {};
styles['.container'] = data.parentStyle;
styles['.container.to'] = {};
styles['.container.how'] = {};
styles['.transition'] = {};
styles['.transition:' + data.pseudo.name] = data.from;
styles['.transition.how:' + data.pseudo.name] = {transition: 'all ' + duration + ' linear 0s'};
styles['.transition.to:' + data.pseudo.name] = data.to;
generalParallelTest.addStyles(data, options, styles);
},
// cleanup after individual test
teardown: generalParallelTest.teardown,
// invoked prior to running a slice of tests
sliceStart: generalParallelTest.sliceStart,
// invoked after running a slice of tests
sliceDone: generalParallelTest.sliceDone,
// test cases, make them as granular as possible
cases: {
// test property values while transitioning
// values.start kicks off a transition
'values': {
// run actual test, assertions can be used here!
start: function(test, data, options) {
// identify initial and target values
generalParallelTest.getStyle(data);
// make sure values differ, if they don't, the property could most likely not be parsed
assert_not_equals(data.pseudo.from, data.pseudo.to, "initial and target values may not match");
// kick off the transition
generalParallelTest.startTransition(data);
// make sure we didn't get the target value immediately.
// If we did, there wouldn't be a transition!
var current = data.pseudo.computedStyle(data.property);
assert_not_equals(current, data.pseudo.to, "must not be target value after start");
},
done: function(test, data, options) {
// make sure the property's value were neither initial nor target while transitioning
test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'pseudo'));
}
}
},
// called once all tests are done
done: generalParallelTest.done
});
</script>
</body>
</html>