mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
210 lines
No EOL
9.3 KiB
HTML
210 lines
No EOL
9.3 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: transitionend event for shorthand property</title>
|
||
<meta content="Test checks that all transitionend events are triggered for shorthand property" 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/css3-transitions/#transition-events" rel="help" title="5. Transition Events" />
|
||
<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:all, changing padding-left / events": {},
|
||
"transition:all, changing padding / events": {},
|
||
"transition:all, changing padding but not padding-bottom / events": {},
|
||
"transition:padding, changing padding-left / events": {},
|
||
"transition:padding, changing padding / events": {},
|
||
"transition:padding, changing padding but not padding-bottom / events": {},
|
||
"transition:padding-left, changing padding-left / events": {},
|
||
"transition:padding-left, changing padding / events": {},
|
||
"transition:padding-left, changing padding but not padding-bottom / events": {}
|
||
}
|
||
*/</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>
|
||
// For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
|
||
// start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
|
||
// properties), using the duration, delay, and timing function at the index corresponding to the shorthand.
|
||
|
||
// this test takes its time, give it a minute to run
|
||
var timeout = 60000;
|
||
setup({timeout: timeout});
|
||
|
||
var tests = [
|
||
{
|
||
name: "transition:all, changing padding-left",
|
||
transitions: 'all .1s linear .01s',
|
||
from: {'padding-left': '1px'},
|
||
to: {'padding-left': '10px'},
|
||
expect: [
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:all, changing padding",
|
||
transitions: 'all .1s linear .01s',
|
||
from: {'padding': '1px'},
|
||
to: {'padding': '10px'},
|
||
expect: [
|
||
'padding-top:0.1s',
|
||
'padding-right:0.1s',
|
||
'padding-bottom:0.1s',
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:all, changing padding but not padding-bottom",
|
||
transitions: 'all .1s linear .01s',
|
||
from: {'padding': '1px 1px 1px 1px'},
|
||
to: {'padding': '10px 10px 1px 10px'},
|
||
expect: [
|
||
'padding-top:0.1s',
|
||
'padding-right:0.1s',
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding, changing padding-left",
|
||
transitions: 'padding .1s linear .01s',
|
||
from: {'padding-left': '1px'},
|
||
to: {'padding-left': '10px'},
|
||
expect: [
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding, changing padding",
|
||
transitions: 'padding .1s linear .01s',
|
||
from: {'padding': '1px'},
|
||
to: {'padding': '10px'},
|
||
expect: [
|
||
'padding-top:0.1s',
|
||
'padding-right:0.1s',
|
||
'padding-bottom:0.1s',
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding, changing padding but not padding-bottom",
|
||
transitions: 'padding .1s linear .01s',
|
||
from: {'padding': '1px 1px 1px 1px'},
|
||
to: {'padding': '10px 10px 1px 10px'},
|
||
expect: [
|
||
'padding-top:0.1s',
|
||
'padding-right:0.1s',
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding-left, changing padding-left",
|
||
transitions: 'padding-left .1s linear .01s',
|
||
from: {'padding-left': '1px'},
|
||
to: {'padding-left': '10px'},
|
||
expect: [
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding-left, changing padding",
|
||
transitions: 'padding-left .1s linear .01s',
|
||
from: {'padding': '1px'},
|
||
to: {'padding': '10px'},
|
||
expect: [
|
||
'padding-left:0.1s'
|
||
]
|
||
}, {
|
||
name: "transition:padding-left, changing padding but not padding-bottom",
|
||
transitions: 'padding-left .1s linear .01s',
|
||
from: {'padding': '1px 1px 1px 1px'},
|
||
to: {'padding': '10px 10px 1px 10px'},
|
||
expect: [
|
||
'padding-left:0.1s'
|
||
]
|
||
}
|
||
];
|
||
|
||
// 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) {
|
||
var styles = {
|
||
'.fixture': {},
|
||
|
||
'.container': {},
|
||
'.container.to': {},
|
||
'.container.how': {},
|
||
|
||
'.transition': data.from,
|
||
'.transition.to' : data.to,
|
||
'.transition.how' : {transition: data.transitions}
|
||
};
|
||
|
||
generalParallelTest.setup(data, options);
|
||
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 TransitionEnd events
|
||
'events': {
|
||
start: function(test, data, options) {
|
||
// kick off the transition
|
||
generalParallelTest.startTransition(data);
|
||
},
|
||
done: function(test, data, options) {
|
||
// make sure we got the event for the tested property only
|
||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', data.expect));
|
||
}
|
||
}
|
||
},
|
||
// called once all tests are done
|
||
done: generalParallelTest.done
|
||
});
|
||
</script>
|
||
|
||
|
||
</body></html> |