mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
159 lines
No EOL
7.5 KiB
HTML
159 lines
No EOL
7.5 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<meta charset="utf-8" />
|
|
<title>CSS Transitions Test: Transitioning Pseudo Elements</title>
|
|
<meta content="Test checks that transitions are run on pseudo elements" name="assert" />
|
|
<link href="http://www.w3.org/TR/css3-transitions/#transition-property-property" rel="help" title="2.1. The 'transition-property' Property" />
|
|
<link href="http://www.w3.org/TR/CSS21/generate.html#before-after-content" rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" />
|
|
<link href="http://www.w3.org/TR/css3-content/" rel="help" title="CSS3 Generated and Replaced Content Module" />
|
|
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm" />
|
|
<meta content="dom" name="flags" />
|
|
|
|
<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>
|
|
|
|
<script id="metadata_cache">/*
|
|
{
|
|
"transition padding-left on :before / values": {},
|
|
"transition padding-left on :after / values": {},
|
|
"transition padding-left on :before, changing content / values": {},
|
|
"transition padding-left on :after, changing content / values": {}
|
|
}
|
|
*/</script>
|
|
</head>
|
|
<body>
|
|
<!-- required by testharnessreport.js -->
|
|
<div id="log"></div>
|
|
<!-- elements used for testing -->
|
|
<div class="fixture" id="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
|
|
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
|
-->
|
|
|
|
<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 = '0.5s';
|
|
|
|
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,
|
|
// the global suite timeout
|
|
timeout: timeout,
|
|
// 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> |