mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -0,0 +1,156 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Transitioning before DOMContentLoaded event</title>
|
||||
<meta content="Test checks that transitions are run even before the document has left parsing mode" name="assert">
|
||||
<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 height from 10px to 100px / values": {},
|
||||
"transition height from 10px to 100px / 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="offs-creen"></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>
|
||||
// make sure a transition is run between DOMContentLoaded and load
|
||||
|
||||
var isDOMContentLoaded = false;
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
isDOMContentLoaded = true;
|
||||
}, false);
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition height from 10px to 100px",
|
||||
property: 'height',
|
||||
flags: {},
|
||||
from: {'height': '10px'},
|
||||
to: {'height': '100px'}
|
||||
}
|
||||
];
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
// the number of tests to run in parallel
|
||||
testsPerSlice: 1,
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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: function(options, tests) {
|
||||
// inject styles into document
|
||||
setStyle(options.styles);
|
||||
},
|
||||
// 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
|
||||
test.step(function() {
|
||||
assert_false(isDOMContentLoaded, "DOMContentLoaded may not have happened yet")
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
<script src="/delay/?type=js&delay=3000"></script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Transitioning before load event</title>
|
||||
<meta content="Test checks that transitions are run even before all assets are loaded" name="assert">
|
||||
<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 height from 10px to 100px / values": {},
|
||||
"transition height from 10px to 100px / 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="offs-creen"></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>
|
||||
// make sure a transition is run between DOMContentLoaded and load
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var isLoad = false;
|
||||
window.addEventListener('load', function() {
|
||||
isLoad = true;
|
||||
}, false);
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var tests = [
|
||||
{
|
||||
name: "transition height from 10px to 100px",
|
||||
property: 'height',
|
||||
flags: {},
|
||||
from: {'height': '10px'},
|
||||
to: {'height': '100px'}
|
||||
}
|
||||
];
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
// the number of tests to run in parallel
|
||||
testsPerSlice: 1,
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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: function(options, tests) {
|
||||
// inject styles into document
|
||||
setStyle(options.styles);
|
||||
},
|
||||
// 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
|
||||
test.step(function() {
|
||||
assert_false(isLoad, "load may not have happened yet")
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
}, false);
|
||||
</script>
|
||||
<img src="/delay/?type=gif&delay=3000" alt="dummy image">
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: behavior when transition parameters change while transitioning</title>
|
||||
<meta content="Test checks that all transitions run properly when property or duration is changed mid-run" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<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>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"changing transition-duration / values": {},
|
||||
"changing transition-property / 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: "changing transition-duration",
|
||||
property: 'padding-left',
|
||||
transitions: 'padding-left .5s linear 0s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
then: {
|
||||
'transition-duration': '0.1s'
|
||||
},
|
||||
expect: [
|
||||
'padding-left:0.5s'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "changing transition-property",
|
||||
property: 'padding-left',
|
||||
transitions: 'padding-left .5s linear 0s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
then: {
|
||||
'transition-property': 'margin-left'
|
||||
},
|
||||
expect: [
|
||||
''
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 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},
|
||||
'.transition.then' : data.then
|
||||
};
|
||||
|
||||
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 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);
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
setTimeout(function() {
|
||||
data.transition.node.classList.add('then');
|
||||
|
||||
for (var property in data.then) {
|
||||
var current = data.transition.computedStyle(property);
|
||||
assert_equals(current, data.then[property], 'value of ' + property + ' changed');
|
||||
}
|
||||
|
||||
}, 50);
|
||||
},
|
||||
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>
|
||||
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-1.htm
Normal file
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#introduction">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>References - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>References (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#references">10 References</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#normative-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#other-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-CSS21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-CSS3-ANIMATIONS">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-CSS3-IMAGES">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-CSS3CASCADE">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-CSS3COLOR">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-SMIL-ANIMATION">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-SVG11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.#ref-WCAG20">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#editors-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
565
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-2.htm
Normal file
565
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,565 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Transitions - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Transitions (41 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transitions">2 Transitions</a></th></tr>
|
||||
<!-- 8 tests -->
|
||||
<tr id="detached-container-001-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="detached-container-001.htm">detached-container-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Not Transitioning within detached element
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitions are NOT run within detached elements</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="hidden-container-001-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="hidden-container-001.htm">hidden-container-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Not Transitioning within hidden element
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitions are NOT run within hidden elements</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-001-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-001.htm">properties-value-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values
|
||||
<ul class="assert">
|
||||
<li>Test checks that value ranges between start and end while transitioning</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-002-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-002.htm">properties-value-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values of missing value types
|
||||
<ul class="assert">
|
||||
<li>Test checks that expected value types that haven't been specified are transitionable</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-003-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-003.htm">properties-value-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values of unspecified properties
|
||||
<ul class="assert">
|
||||
<li>Test checks that properties are transitionable that haven't been specified</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-auto-001-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-auto-001.htm">properties-value-auto-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitioning property value "auto"
|
||||
<ul class="assert">
|
||||
<li>Test checks that properties are transitioned from an to auto-value</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-implicit-001-2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-implicit-001.htm">properties-value-implicit-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>font-size-relative properties transition by implicit value change
|
||||
<ul class="assert">
|
||||
<li>Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transitions-animatable-properties-01-2" class="primary script">
|
||||
<td><strong>
|
||||
<a href="transitions-animatable-properties-01.htm">transitions-animatable-properties-01</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Transitions: Animatable CSS properties
|
||||
<ul class="assert">
|
||||
<li>Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.#list-matching">
|
||||
<!-- 1 tests -->
|
||||
<tr id="events-004-2.#list-matching" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-004.htm">events-004</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with non matching lists
|
||||
<ul class="assert">
|
||||
<li>Test checks that non-matching lists are properly resolved</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.#transitions-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-property-property">2.1 The ‘transition-property’ Property</a></th></tr>
|
||||
<!-- 9 tests -->
|
||||
<tr id="events-001-2.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-001.htm">events-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event for shorthand property
|
||||
<ul class="assert">
|
||||
<li>Test checks that all transitionend events are triggered for shorthand property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-005-2.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-005.htm">events-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with property specificity
|
||||
<ul class="assert">
|
||||
<li>Test checks that property specificity is properly resolved</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="pseudo-elements-001-2.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="pseudo-elements-001.htm">pseudo-elements-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Transitioning Pseudo Elements
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitions are run on pseudo elements</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-001-2.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-property-001.htm">transition-property-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-property
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-property values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-002-2.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-property-002.htm">transition-property-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing invalid transition-property
|
||||
<ul class="assert">
|
||||
<li>Test checks that unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-003-2.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-003.htm">transition-property-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - none
|
||||
<ul class="assert">
|
||||
<li>The 'transition-duration' property set 'none' means that no property will be transitioned.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-004-2.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-004.htm">transition-property-004</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - all
|
||||
<ul class="assert">
|
||||
<li>The 'transition-duration' property set 'all' means that all properties are transitioned.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-005-2.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-005.htm">transition-property-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - height width(more than one properties specified)
|
||||
<ul class="assert">
|
||||
<li>The 'transition-duration' property set more than one properties like 'height, width' means only the specified properties will be transitioned.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-test-2.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="transition-test.htm">transition-test</a></strong></td>
|
||||
<td><a href="reference/transition-test-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>invalid values cause all properites to animate.
|
||||
<ul class="assert">
|
||||
<li>When an invalid value is specified as one of the transition properties, it causes the the transition-property to change to 'all'. Instead of leaving the invalid property in and animating the valid properites with matching durations.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.1.#single-transition-property">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.#the-transition-property-property-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.#transition-property">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">2.2 The ‘transition-duration’ Property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<tr id="transition-duration-001-2.2" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-duration-001.htm">transition-duration-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-duration
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-duration values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-duration-002-2.2" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-duration-002.htm">transition-duration-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-duration - positive number
|
||||
<ul class="assert">
|
||||
<li>The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-duration-003-2.2" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-duration-003.htm">transition-duration-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-duration - 0s(initial value)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-duration-004-2.2" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-duration-004.htm">transition-duration-004</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-duration - negative number
|
||||
<ul class="assert">
|
||||
<li>A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.2.#the-transition-duration-property-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.#transition-duration">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function-property">2.3 The ‘transition-timing-function’ Property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="transition-timing-function-001-2.3" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-001.htm">transition-timing-function-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-timing-function
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-timing-function values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.3.#single-transition-timing-function">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.3.#transition-timing-function">
|
||||
<!-- 12 tests -->
|
||||
<tr id="transition-timing-function-002-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-002.htm">transition-timing-function-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-003-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-003.htm">transition-timing-function-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-004-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-004.htm">transition-timing-function-004</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-005-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-005.htm">transition-timing-function-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-006-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-006.htm">transition-timing-function-006</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-007-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-007.htm">transition-timing-function-007</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'step-end' equivalent to 'steps(1, end)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-008-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-008.htm">transition-timing-function-008</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - 'step-start' equivalent to 'steps(1, start)'
|
||||
<ul class="assert">
|
||||
<li>The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-009-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-009.htm">transition-timing-function-009</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - ease(initial value)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the initial value of 'transition-timing-function' property is 'ease'.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-010-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-010.htm">transition-timing-function-010</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - steps(2)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the first parameter of 'steps()' function specifies the number of intervals.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-011-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-011.htm">transition-timing-function-011</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - steps(the second parameter default 'end')
|
||||
<ul class="assert">
|
||||
<li>Test checks that the second parameter of 'steps()' function is default 'end'.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-012-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-012.htm">transition-timing-function-012</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - steps(-2)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'steps()' function with negative number is invalid, the transition-timing-function will use 'ease' as default.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-timing-function-013-2.3.#transition-timing-function" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-timing-function-013.htm">transition-timing-function-013</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-timing-function - steps(0)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'steps()' function with '0' is invalid, the transition-timing-function will use 'ease' as default.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.3.#transition-timing-function_tag">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">2.4 The ‘transition-delay’ Property</a></th></tr>
|
||||
<!-- 5 tests -->
|
||||
<tr id="events-003-2.4" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-003.htm">events-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with negative delay
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitionend event is triggered for duration time being canceled out by negative delay</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-delay-000-2.4" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-delay-000.htm">transition-delay-000</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-delay - positive number
|
||||
<ul class="assert">
|
||||
<li>The 'transition-delay' property set positive number to delay the execution of transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-delay-001-2.4" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-delay-001.htm">transition-delay-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition-delay
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition-delay values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-delay-002-2.4" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-delay-002.htm">transition-delay-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-delay - 0s
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'transition-delay' property set 0 will not delay the execution of transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-delay-003-2.4" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-delay-003.htm">transition-delay-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-delay - negative number
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'transition-delay' property set negative number will not delay the execution of transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.4.#the-transition-delay-property-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.4.#transition-delay">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property">2.5 The ‘transition’ Shorthand Property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="transition-001-2.5" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="transition-001.htm">transition-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Parsing transition shorthand
|
||||
<ul class="assert">
|
||||
<li>Test checks that transition shorthand values are parsed properly</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.5.#single-transition">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.5.#the-transition-shorthand-property-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.5.#transition">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
128
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-3.htm
Normal file
128
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Starting of transitions - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Starting of transitions (4 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#starting">3 Starting of transitions</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<tr id="changing-while-transition-3" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="changing-while-transition.htm">changing-while-transition</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>behavior when transition parameters change while transitioning
|
||||
<ul class="assert">
|
||||
<li>Test checks that all transitions run properly when property or duration is changed mid-run</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-inherit-001-3" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-inherit-001.htm">properties-value-inherit-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitioning inherited property values
|
||||
<ul class="assert">
|
||||
<li>Test checks that inherited property values that are transitioned on a parent element don't start a transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-inherit-002-3" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-inherit-002.htm">properties-value-inherit-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitioning inherited property values
|
||||
<ul class="assert">
|
||||
<li>Test checks that inherited property values that are not transitioned on a parent element start a transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-inherit-003-3" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="properties-value-inherit-003.htm">properties-value-inherit-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitioning implicitly inherited property values
|
||||
<ul class="assert">
|
||||
<li>Test checks that implicitly inherited property values that are transitioned on a parent element don't start a transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.#after-change-style">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#before-change-style">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#combined-duration">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#end-time">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#end-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#manual-reversing-example">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#reversing-adjusted-start-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#reversing-shortening-factor">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#start-time">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#start-value">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#style-change-event">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#reversing">3.1 Automatically reversing interrupted transitions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#new-transition">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#old-transition">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-4.htm
Normal file
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Application of transitions - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Application of transitions (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#application">4 Application of transitions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
154
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-5.htm
Normal file
154
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-5.htm
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Transition Events - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Transition Events (8 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#transition-events">5 Transition Events</a></th></tr>
|
||||
<!-- 8 tests -->
|
||||
<tr id="before-domcontentloaded-001-5" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="before-DOMContentLoaded-001.htm">before-domcontentloaded-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Transitioning before DOMContentLoaded event
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitions are run even before the document has left parsing mode</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="before-load-001-5" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="before-load-001.htm">before-load-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Transitioning before load event
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitions are run even before all assets are loaded</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-001-5" class="dom script">
|
||||
<td>
|
||||
<a href="events-001.htm">events-001</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event for shorthand property
|
||||
<ul class="assert">
|
||||
<li>Test checks that all transitionend events are triggered for shorthand property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-002-5" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-002.htm">events-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event for implied property value
|
||||
<ul class="assert">
|
||||
<li>Test checks that all transitionend events are triggered for implied property value</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-003-5" class="dom script">
|
||||
<td>
|
||||
<a href="events-003.htm">events-003</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with negative delay
|
||||
<ul class="assert">
|
||||
<li>Test checks that transitionend event is triggered for duration time being canceled out by negative delay</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-004-5" class="dom script">
|
||||
<td>
|
||||
<a href="events-004.htm">events-004</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with non matching lists
|
||||
<ul class="assert">
|
||||
<li>Test checks that non-matching lists are properly resolved</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-005-5" class="dom script">
|
||||
<td>
|
||||
<a href="events-005.htm">events-005</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event with property specificity
|
||||
<ul class="assert">
|
||||
<li>Test checks that property specificity is properly resolved</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="events-006-5" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="events-006.htm">events-006</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>transitionend event for pseudo elements
|
||||
<ul class="assert">
|
||||
<li>Test checks that TransitionEnd events are fired for pseudo-elements</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.#Events-TransitionEvent">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#Events-TransitionEvent-elapsedTime">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#Events-TransitionEvent-propertyName">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#Events-TransitionEvent-pseudoElement">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#TransitionEvent">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#TransitionEvent-constructor">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#TransitionEventInit">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#transition-events-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.#transitionend">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
92
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-6.htm
Normal file
92
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation of property types - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Animation of property types (1 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#animatable-types">6 Animation of property types</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="currentcolor-animation-001-6" class="primary script">
|
||||
<td><strong>
|
||||
<a href="currentcolor-animation-001.htm">currentcolor-animation-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Variables Allowed Syntax
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s6.#animation-of-property-types-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-font-weight">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-gradient">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-integer">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-length">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-lpcalc">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-number">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-paintserver">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-percentage">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-rect">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-repeatable-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-shadow-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-simple-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#animtype-visibility">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
544
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-7.htm
Normal file
544
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,544 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animatable properties - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Animatable properties (44 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#animatable-properties">7 Animatable properties</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="transitions-animatable-properties-01-7" class="script">
|
||||
<td>
|
||||
<a href="transitions-animatable-properties-01.htm">transitions-animatable-properties-01</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Transitions: Animatable CSS properties
|
||||
<ul class="assert">
|
||||
<li>Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.#animatable-properties-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#animatable-css">7.1 Properties from CSS</a></th></tr>
|
||||
<!-- 43 tests -->
|
||||
<tr id="properties-value-001-7.1" class="dom script">
|
||||
<td>
|
||||
<a href="properties-value-001.htm">properties-value-001</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values
|
||||
<ul class="assert">
|
||||
<li>Test checks that value ranges between start and end while transitioning</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-002-7.1" class="dom script">
|
||||
<td>
|
||||
<a href="properties-value-002.htm">properties-value-002</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values of missing value types
|
||||
<ul class="assert">
|
||||
<li>Test checks that expected value types that haven't been specified are transitionable</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="properties-value-003-7.1" class="dom script">
|
||||
<td>
|
||||
<a href="properties-value-003.htm">properties-value-003</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Intermediate Property Values of unspecified properties
|
||||
<ul class="assert">
|
||||
<li>Test checks that properties are transitionable that haven't been specified</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-006-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-006.htm">transition-property-006</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - background-position
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'background-position' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-007-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-007.htm">transition-property-007</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-bottom-color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-bottom-color' property animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-008-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-008.htm">transition-property-008</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-bottom-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-bottom-width' property animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-009-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-009.htm">transition-property-009</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-left-color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-left-color' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-010-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-010.htm">transition-property-010</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-left-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-left-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-011-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-011.htm">transition-property-011</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-right-color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-right-color' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-012-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-012.htm">transition-property-012</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-right-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-right-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-013-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-013.htm">transition-property-013</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-top-color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-top-color' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-014-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-014.htm">transition-property-014</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-top-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-top-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-015-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-015.htm">transition-property-015</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - border-spacing
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'border-spacing' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-016-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-016.htm">transition-property-016</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - bottom
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'bottom' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-017-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-017.htm">transition-property-017</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - clip
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'clip' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-018-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-018.htm">transition-property-018</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'color' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-019-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-019.htm">transition-property-019</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - font-size
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'font-size' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-020-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-020.htm">transition-property-020</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - font-weight
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'font-weight' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-021-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-021.htm">transition-property-021</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - left
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'left' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-022-7.1" class="primary ahem, interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-022.htm">transition-property-022</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem," title=""></abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - letter-spacing
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'letter-spacing' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-023-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-023.htm">transition-property-023</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - line-height
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'line-height' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-024-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-024.htm">transition-property-024</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - margin-bottom
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'margin-bottom' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-025-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-025.htm">transition-property-025</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - margin-left
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'margin-left' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-026-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-026.htm">transition-property-026</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - margin-right
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'margin-right' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-027-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-027.htm">transition-property-027</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - max-height
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'max-height' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-028-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-028.htm">transition-property-028</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - max-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'max-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-029-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-029.htm">transition-property-029</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - min-height
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'min-height' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-030-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-030.htm">transition-property-030</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - min-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'min-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-031-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-031.htm">transition-property-031</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'opacity' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-032-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-032.htm">transition-property-032</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - outline-color
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'outline-color' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-033-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-033.htm">transition-property-033</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - outline-width
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'outline-width' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-034-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-034.htm">transition-property-034</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - padding-bottom
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'padding-bottom' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-035-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-035.htm">transition-property-035</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - padding-left
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'padding-left' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-036-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-036.htm">transition-property-036</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - padding-right
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'padding-right' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-037-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-037.htm">transition-property-037</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - padding-top
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'padding-top' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-038-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-038.htm">transition-property-038</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - right
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'right' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-039-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-039.htm">transition-property-039</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - text-indent
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'text-indent' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-040-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-040.htm">transition-property-040</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - text-shadow
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'text-shadow' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-041-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-041.htm">transition-property-041</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - top
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'top' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-042-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-042.htm">transition-property-042</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - vertical-align
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'vertical-align' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-043-7.1" class="primary interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-043.htm">transition-property-043</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
||||
<td>transition-property - visibility
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'visibility' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-044-7.1" class="primary ahem,interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-044.htm">transition-property-044</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem,interact" title=""></abbr></td>
|
||||
<td>transition-property - word-spacing
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'word-spacing' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transition-property-045-7.1" class="primary ahem,interact">
|
||||
<td><strong>
|
||||
<a href="transition-property-045.htm">transition-property-045</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem,interact" title=""></abbr></td>
|
||||
<td>transition-property - z-index
|
||||
<ul class="assert">
|
||||
<li>Test checks that the 'z-index' property is animatable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.1.#properties-from-css-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#animatable-svg">7.2 Properties from SVG</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#properties-from-svg-">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-8.htm
Normal file
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-8.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Changes since Working Draft of 12 February 2013 - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Changes since Working Draft of 12 February 2013 (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#changes">8 Changes since Working Draft of 12 February 2013</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-9.htm
Normal file
39
tests/wpt/css-tests/css-transitions-1_dev/html/chapter-9.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Acknowledgments - CSS Transitions Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite</h1>
|
||||
<h2>Acknowledgments (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-transitions/#acknowledgments">9 Acknowledgments</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://mozilla.com/" rel="author" title="Mozilla Corporation">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-types" rel="help">
|
||||
<!-- also see https://www.w3.org/Bugs/Public/show_bug.cgi?id=14605 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="style"></style>
|
||||
<script id="metadata_cache"></script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
test(function() {
|
||||
var div = document.getElementById("test");
|
||||
var cs = getComputedStyle(div, "");
|
||||
div.style.color = "red";
|
||||
div.style.backgroundColor = "currentcolor";
|
||||
var force_flush = cs.backgroundColor;
|
||||
div.style.transition = "background-color linear 50s -10s";
|
||||
div.style.color = "blue";
|
||||
var quarter_interpolated = cs.backgroundColor;
|
||||
div.style.transition = "";
|
||||
div.style.backgroundColor = "rgb(204, 0, 51)";
|
||||
var quarter_reference = cs.backgroundColor;
|
||||
div.style.backgroundColor = "blue";
|
||||
var final_reference = cs.backgroundColor;
|
||||
assert_true(quarter_interpolated != quarter_reference &&
|
||||
quarter_interpolated == final_reference);
|
||||
},
|
||||
"currentcolortransition",
|
||||
{ assert: "Transition does not occur when the value is currentColor and color changes" });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Not Transitioning within detached element</title>
|
||||
<meta content="Test checks that transitions are NOT run within detached elements" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<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 within detached container / values": {},
|
||||
"transition within detached container / 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="off-screen"></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 within detached container",
|
||||
property: 'background-color',
|
||||
flags: {},
|
||||
from: {'background-color': 'red'},
|
||||
to: {'background-color': 'green'}
|
||||
}
|
||||
];
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
// the number of tests to run in parallel
|
||||
testsPerSlice: 1,
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// detach transitioning elements
|
||||
data.fixture.parentNode.removeChild(data.fixture);
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
},
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no intermediate values
|
||||
assert_equals(data.transition.values.length, 2, "no intermediate values");
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
209
tests/wpt/css-tests/css-transitions-1_dev/html/events-001.htm
Normal file
209
tests/wpt/css-tests/css-transitions-1_dev/html/events-001.htm
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html><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>
|
||||
135
tests/wpt/css-tests/css-transitions-1_dev/html/events-002.htm
Normal file
135
tests/wpt/css-tests/css-transitions-1_dev/html/events-002.htm
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitionend event for implied property value</title>
|
||||
<meta content="Test checks that all transitionend events are triggered for implied property value" name="assert">
|
||||
<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">/*
|
||||
{
|
||||
"transitions:all, changing padding-left from nothing / events": {},
|
||||
"transitions:all, changing padding from nothing / 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>
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transitions:all, changing padding-left from nothing",
|
||||
transitions: 'all .1s linear .01s',
|
||||
from: {}, // no padding === padding:0;
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "transitions:all, changing padding from nothing",
|
||||
transitions: 'all .1s linear .01s',
|
||||
from: {}, // no padding === padding:0;
|
||||
to: {'padding': '10px'},
|
||||
expect: [
|
||||
'padding-top:0.1s',
|
||||
'padding-right:0.1s',
|
||||
'padding-bottom:0.1s',
|
||||
'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>
|
||||
142
tests/wpt/css-tests/css-transitions-1_dev/html/events-003.htm
Normal file
142
tests/wpt/css-tests/css-transitions-1_dev/html/events-003.htm
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitionend event with negative delay</title>
|
||||
<meta content="Test checks that transitionend event is triggered for duration time being canceled out by negative delay" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transition-delay-property" rel="help" title="2.4. The 'transition-delay' 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">/*
|
||||
{
|
||||
"duration: 0.1s, delay: -0.05s / events": {},
|
||||
"duration: 0.1s, delay: -0.1s / 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>
|
||||
// If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property
|
||||
// is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to
|
||||
// begin part-way through its play cycle. In the case where a transition has implied starting values and a negative
|
||||
// 'transition-delay', the starting values are taken from the moment the property is changed.
|
||||
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Define the combined duration of the transition as the sum of max(‘transition-duration’, ‘0s’) and ‘transition-delay’.
|
||||
// When the combined duration is greater than ‘0s’, then a transition starts based on the values of ‘transition-duration’,
|
||||
// ‘transition-delay’, and ‘transition-timing-function’; in other cases transitions do not occur.
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "duration: 0.1s, delay: -0.05s",
|
||||
transitions: 'all .1s linear -0.05s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "duration: 0.1s, delay: -0.1s",
|
||||
transitions: 'all .1s linear -0.1s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '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>
|
||||
149
tests/wpt/css-tests/css-transitions-1_dev/html/events-004.htm
Normal file
149
tests/wpt/css-tests/css-transitions-1_dev/html/events-004.htm
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitionend event with non matching lists</title>
|
||||
<meta content="Test checks that non-matching lists are properly resolved" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#list-matching" rel="help" title="2. Transitions - Example 3">
|
||||
<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">/*
|
||||
{
|
||||
"repeating lists / events": {},
|
||||
"truncating lists / 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>
|
||||
// In the case where the lists of values in transition properties do not have the same length, the length of the
|
||||
// ‘transition-property’ list determines the number of items in each list examined when starting transitions.
|
||||
// The lists are matched up from the first value: excess values at the end are not used.
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "repeating lists",
|
||||
from: {'padding': '1px'},
|
||||
to: {
|
||||
'padding': '10px',
|
||||
'transition-property': 'padding-top, padding-right, padding-bottom, padding-left',
|
||||
'transition-duration': '0.1s, 0.05s',
|
||||
'transition-timing-function': 'linear, ease-in',
|
||||
'transition-delay': '0.01s, 0.02s',
|
||||
},
|
||||
expect: [
|
||||
'padding-top:0.1s',
|
||||
'padding-right:0.05s',
|
||||
'padding-bottom:0.1s',
|
||||
'padding-left:0.05s',
|
||||
]
|
||||
}, {
|
||||
name: "truncating lists",
|
||||
from: {'padding': '1px'},
|
||||
to: {
|
||||
'padding': '10px',
|
||||
'transition-property': 'padding-top',
|
||||
'transition-duration': '0.1s, 0.05s',
|
||||
'transition-timing-function': 'linear, ease-in',
|
||||
'transition-delay': '0.01s, 0.02s',
|
||||
},
|
||||
expect: [
|
||||
'padding-top: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' : {}
|
||||
};
|
||||
|
||||
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>
|
||||
145
tests/wpt/css-tests/css-transitions-1_dev/html/events-005.htm
Normal file
145
tests/wpt/css-tests/css-transitions-1_dev/html/events-005.htm
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitionend event with property specificity</title>
|
||||
<meta content="Test checks that property specificity is properly resolved" 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">/*
|
||||
{
|
||||
"property repetition / events": {},
|
||||
"padding, padding-left / events": {},
|
||||
"padding-left, padding / 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>
|
||||
// If a property is specified multiple times in the value of ‘transition-property’ (either on its own, via a shorthand that
|
||||
// contains it, or via the ‘all’ value), then the transition that starts uses the duration, delay, and timing function at
|
||||
// the index corresponding to the last item in the value of ‘transition-property’ that calls for animating that property.
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "property repetition",
|
||||
transitions: 'padding-left .1s linear 0s, padding-left .15s linear 0s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}, {
|
||||
name: "padding, padding-left",
|
||||
transitions: 'padding .1s linear 0s, padding-left .15s linear 0s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}, {
|
||||
name: "padding-left, padding",
|
||||
transitions: 'padding-left .1s linear 0s, padding .15s linear 0s',
|
||||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 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>
|
||||
134
tests/wpt/css-tests/css-transitions-1_dev/html/events-006.htm
Normal file
134
tests/wpt/css-tests/css-transitions-1_dev/html/events-006.htm
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitionend event for pseudo elements</title>
|
||||
<meta content="Test checks that TransitionEnd events are fired for pseudo-elements" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<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 / events": {},
|
||||
"transition padding-left on :after / 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>
|
||||
// this is yet to be specified behavior
|
||||
|
||||
// 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'},
|
||||
expect: [
|
||||
'padding-left:before:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "transition padding-left on :after",
|
||||
pseudo: 'after',
|
||||
property: 'padding-left',
|
||||
flags: {},
|
||||
from: {'padding-left': '1px', 'content': '""'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:after: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 = {};
|
||||
styles['.container'] = {};
|
||||
styles['.transition'] = {};
|
||||
styles['.transition:' + data.pseudo.name] = data.from;
|
||||
styles['.transition.how:' + data.pseudo.name] = {transition: 'all .1s linear 0s'};
|
||||
styles['.transition.to:' + data.pseudo.name] = data.to;
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Not Transitioning within hidden element</title>
|
||||
<meta content="Test checks that transitions are NOT run within hidden elements" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<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 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition within display:none / values": {},
|
||||
"transition within display:none / 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>
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition within display:none",
|
||||
property: 'background-color',
|
||||
flags: {},
|
||||
from: {'background-color': 'red'},
|
||||
to: {'background-color': 'green'}
|
||||
}
|
||||
];
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
// the number of tests to run in parallel
|
||||
testsPerSlice: 1,
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
},
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no intermediate values
|
||||
assert_equals(data.transition.values.length, 2, "no intermediate values");
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,700 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values</title>
|
||||
<meta content="Test checks that value ranges between start and end while transitioning" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<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">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
"background-color color(rgba) / events": {},
|
||||
"background-position length(pt) / values": {},
|
||||
"background-position length(pt) / events": {},
|
||||
"background-position length(pc) / values": {},
|
||||
"background-position length(pc) / events": {},
|
||||
"background-position length(px) / values": {},
|
||||
"background-position length(px) / events": {},
|
||||
"background-position length(em) / values": {},
|
||||
"background-position length(em) / events": {},
|
||||
"background-position length(ex) / values": {},
|
||||
"background-position length(ex) / events": {},
|
||||
"background-position length(mm) / values": {},
|
||||
"background-position length(mm) / events": {},
|
||||
"background-position length(cm) / values": {},
|
||||
"background-position length(cm) / events": {},
|
||||
"background-position length(in) / values": {},
|
||||
"background-position length(in) / events": {},
|
||||
"background-position percentage(%) / values": {},
|
||||
"background-position percentage(%) / events": {},
|
||||
"border-top-width length(pt) / values": {},
|
||||
"border-top-width length(pt) / events": {},
|
||||
"border-top-width length(pc) / values": {},
|
||||
"border-top-width length(pc) / events": {},
|
||||
"border-top-width length(px) / values": {},
|
||||
"border-top-width length(px) / events": {},
|
||||
"border-top-width length(em) / values": {},
|
||||
"border-top-width length(em) / events": {},
|
||||
"border-top-width length(ex) / values": {},
|
||||
"border-top-width length(ex) / events": {},
|
||||
"border-top-width length(mm) / values": {},
|
||||
"border-top-width length(mm) / events": {},
|
||||
"border-top-width length(cm) / values": {},
|
||||
"border-top-width length(cm) / events": {},
|
||||
"border-top-width length(in) / values": {},
|
||||
"border-top-width length(in) / events": {},
|
||||
"border-right-width length(pt) / values": {},
|
||||
"border-right-width length(pt) / events": {},
|
||||
"border-right-width length(pc) / values": {},
|
||||
"border-right-width length(pc) / events": {},
|
||||
"border-right-width length(px) / values": {},
|
||||
"border-right-width length(px) / events": {},
|
||||
"border-right-width length(em) / values": {},
|
||||
"border-right-width length(em) / events": {},
|
||||
"border-right-width length(ex) / values": {},
|
||||
"border-right-width length(ex) / events": {},
|
||||
"border-right-width length(mm) / values": {},
|
||||
"border-right-width length(mm) / events": {},
|
||||
"border-right-width length(cm) / values": {},
|
||||
"border-right-width length(cm) / events": {},
|
||||
"border-right-width length(in) / values": {},
|
||||
"border-right-width length(in) / events": {},
|
||||
"border-bottom-width length(pt) / values": {},
|
||||
"border-bottom-width length(pt) / events": {},
|
||||
"border-bottom-width length(pc) / values": {},
|
||||
"border-bottom-width length(pc) / events": {},
|
||||
"border-bottom-width length(px) / values": {},
|
||||
"border-bottom-width length(px) / events": {},
|
||||
"border-bottom-width length(em) / values": {},
|
||||
"border-bottom-width length(em) / events": {},
|
||||
"border-bottom-width length(ex) / values": {},
|
||||
"border-bottom-width length(ex) / events": {},
|
||||
"border-bottom-width length(mm) / values": {},
|
||||
"border-bottom-width length(mm) / events": {},
|
||||
"border-bottom-width length(cm) / values": {},
|
||||
"border-bottom-width length(cm) / events": {},
|
||||
"border-bottom-width length(in) / values": {},
|
||||
"border-bottom-width length(in) / events": {},
|
||||
"border-left-width length(pt) / values": {},
|
||||
"border-left-width length(pt) / events": {},
|
||||
"border-left-width length(pc) / values": {},
|
||||
"border-left-width length(pc) / events": {},
|
||||
"border-left-width length(px) / values": {},
|
||||
"border-left-width length(px) / events": {},
|
||||
"border-left-width length(em) / values": {},
|
||||
"border-left-width length(em) / events": {},
|
||||
"border-left-width length(ex) / values": {},
|
||||
"border-left-width length(ex) / events": {},
|
||||
"border-left-width length(mm) / values": {},
|
||||
"border-left-width length(mm) / events": {},
|
||||
"border-left-width length(cm) / values": {},
|
||||
"border-left-width length(cm) / events": {},
|
||||
"border-left-width length(in) / values": {},
|
||||
"border-left-width length(in) / events": {},
|
||||
"border-top-color color(rgba) / values": {},
|
||||
"border-top-color color(rgba) / events": {},
|
||||
"border-right-color color(rgba) / values": {},
|
||||
"border-right-color color(rgba) / events": {},
|
||||
"border-bottom-color color(rgba) / values": {},
|
||||
"border-bottom-color color(rgba) / events": {},
|
||||
"border-left-color color(rgba) / values": {},
|
||||
"border-left-color color(rgba) / events": {},
|
||||
"padding-bottom length(pt) / values": {},
|
||||
"padding-bottom length(pt) / events": {},
|
||||
"padding-bottom length(pc) / values": {},
|
||||
"padding-bottom length(pc) / events": {},
|
||||
"padding-bottom length(px) / values": {},
|
||||
"padding-bottom length(px) / events": {},
|
||||
"padding-bottom length(em) / values": {},
|
||||
"padding-bottom length(em) / events": {},
|
||||
"padding-bottom length(ex) / values": {},
|
||||
"padding-bottom length(ex) / events": {},
|
||||
"padding-bottom length(mm) / values": {},
|
||||
"padding-bottom length(mm) / events": {},
|
||||
"padding-bottom length(cm) / values": {},
|
||||
"padding-bottom length(cm) / events": {},
|
||||
"padding-bottom length(in) / values": {},
|
||||
"padding-bottom length(in) / events": {},
|
||||
"padding-left length(pt) / values": {},
|
||||
"padding-left length(pt) / events": {},
|
||||
"padding-left length(pc) / values": {},
|
||||
"padding-left length(pc) / events": {},
|
||||
"padding-left length(px) / values": {},
|
||||
"padding-left length(px) / events": {},
|
||||
"padding-left length(em) / values": {},
|
||||
"padding-left length(em) / events": {},
|
||||
"padding-left length(ex) / values": {},
|
||||
"padding-left length(ex) / events": {},
|
||||
"padding-left length(mm) / values": {},
|
||||
"padding-left length(mm) / events": {},
|
||||
"padding-left length(cm) / values": {},
|
||||
"padding-left length(cm) / events": {},
|
||||
"padding-left length(in) / values": {},
|
||||
"padding-left length(in) / events": {},
|
||||
"padding-right length(pt) / values": {},
|
||||
"padding-right length(pt) / events": {},
|
||||
"padding-right length(pc) / values": {},
|
||||
"padding-right length(pc) / events": {},
|
||||
"padding-right length(px) / values": {},
|
||||
"padding-right length(px) / events": {},
|
||||
"padding-right length(em) / values": {},
|
||||
"padding-right length(em) / events": {},
|
||||
"padding-right length(ex) / values": {},
|
||||
"padding-right length(ex) / events": {},
|
||||
"padding-right length(mm) / values": {},
|
||||
"padding-right length(mm) / events": {},
|
||||
"padding-right length(cm) / values": {},
|
||||
"padding-right length(cm) / events": {},
|
||||
"padding-right length(in) / values": {},
|
||||
"padding-right length(in) / events": {},
|
||||
"padding-top length(pt) / values": {},
|
||||
"padding-top length(pt) / events": {},
|
||||
"padding-top length(pc) / values": {},
|
||||
"padding-top length(pc) / events": {},
|
||||
"padding-top length(px) / values": {},
|
||||
"padding-top length(px) / events": {},
|
||||
"padding-top length(em) / values": {},
|
||||
"padding-top length(em) / events": {},
|
||||
"padding-top length(ex) / values": {},
|
||||
"padding-top length(ex) / events": {},
|
||||
"padding-top length(mm) / values": {},
|
||||
"padding-top length(mm) / events": {},
|
||||
"padding-top length(cm) / values": {},
|
||||
"padding-top length(cm) / events": {},
|
||||
"padding-top length(in) / values": {},
|
||||
"padding-top length(in) / events": {},
|
||||
"margin-bottom length(pt) / values": {},
|
||||
"margin-bottom length(pt) / events": {},
|
||||
"margin-bottom length(pc) / values": {},
|
||||
"margin-bottom length(pc) / events": {},
|
||||
"margin-bottom length(px) / values": {},
|
||||
"margin-bottom length(px) / events": {},
|
||||
"margin-bottom length(em) / values": {},
|
||||
"margin-bottom length(em) / events": {},
|
||||
"margin-bottom length(ex) / values": {},
|
||||
"margin-bottom length(ex) / events": {},
|
||||
"margin-bottom length(mm) / values": {},
|
||||
"margin-bottom length(mm) / events": {},
|
||||
"margin-bottom length(cm) / values": {},
|
||||
"margin-bottom length(cm) / events": {},
|
||||
"margin-bottom length(in) / values": {},
|
||||
"margin-bottom length(in) / events": {},
|
||||
"margin-left length(pt) / values": {},
|
||||
"margin-left length(pt) / events": {},
|
||||
"margin-left length(pc) / values": {},
|
||||
"margin-left length(pc) / events": {},
|
||||
"margin-left length(px) / values": {},
|
||||
"margin-left length(px) / events": {},
|
||||
"margin-left length(em) / values": {},
|
||||
"margin-left length(em) / events": {},
|
||||
"margin-left length(ex) / values": {},
|
||||
"margin-left length(ex) / events": {},
|
||||
"margin-left length(mm) / values": {},
|
||||
"margin-left length(mm) / events": {},
|
||||
"margin-left length(cm) / values": {},
|
||||
"margin-left length(cm) / events": {},
|
||||
"margin-left length(in) / values": {},
|
||||
"margin-left length(in) / events": {},
|
||||
"margin-right length(pt) / values": {},
|
||||
"margin-right length(pt) / events": {},
|
||||
"margin-right length(pc) / values": {},
|
||||
"margin-right length(pc) / events": {},
|
||||
"margin-right length(px) / values": {},
|
||||
"margin-right length(px) / events": {},
|
||||
"margin-right length(em) / values": {},
|
||||
"margin-right length(em) / events": {},
|
||||
"margin-right length(ex) / values": {},
|
||||
"margin-right length(ex) / events": {},
|
||||
"margin-right length(mm) / values": {},
|
||||
"margin-right length(mm) / events": {},
|
||||
"margin-right length(cm) / values": {},
|
||||
"margin-right length(cm) / events": {},
|
||||
"margin-right length(in) / values": {},
|
||||
"margin-right length(in) / events": {},
|
||||
"margin-top length(pt) / values": {},
|
||||
"margin-top length(pt) / events": {},
|
||||
"margin-top length(pc) / values": {},
|
||||
"margin-top length(pc) / events": {},
|
||||
"margin-top length(px) / values": {},
|
||||
"margin-top length(px) / events": {},
|
||||
"margin-top length(em) / values": {},
|
||||
"margin-top length(em) / events": {},
|
||||
"margin-top length(ex) / values": {},
|
||||
"margin-top length(ex) / events": {},
|
||||
"margin-top length(mm) / values": {},
|
||||
"margin-top length(mm) / events": {},
|
||||
"margin-top length(cm) / values": {},
|
||||
"margin-top length(cm) / events": {},
|
||||
"margin-top length(in) / values": {},
|
||||
"margin-top length(in) / events": {},
|
||||
"height length(pt) / values": {},
|
||||
"height length(pt) / events": {},
|
||||
"height length(pc) / values": {},
|
||||
"height length(pc) / events": {},
|
||||
"height length(px) / values": {},
|
||||
"height length(px) / events": {},
|
||||
"height length(em) / values": {},
|
||||
"height length(em) / events": {},
|
||||
"height length(ex) / values": {},
|
||||
"height length(ex) / events": {},
|
||||
"height length(mm) / values": {},
|
||||
"height length(mm) / events": {},
|
||||
"height length(cm) / values": {},
|
||||
"height length(cm) / events": {},
|
||||
"height length(in) / values": {},
|
||||
"height length(in) / events": {},
|
||||
"height percentage(%) / values": {},
|
||||
"height percentage(%) / events": {},
|
||||
"width length(pt) / values": {},
|
||||
"width length(pt) / events": {},
|
||||
"width length(pc) / values": {},
|
||||
"width length(pc) / events": {},
|
||||
"width length(px) / values": {},
|
||||
"width length(px) / events": {},
|
||||
"width length(em) / values": {},
|
||||
"width length(em) / events": {},
|
||||
"width length(ex) / values": {},
|
||||
"width length(ex) / events": {},
|
||||
"width length(mm) / values": {},
|
||||
"width length(mm) / events": {},
|
||||
"width length(cm) / values": {},
|
||||
"width length(cm) / events": {},
|
||||
"width length(in) / values": {},
|
||||
"width length(in) / events": {},
|
||||
"width percentage(%) / values": {},
|
||||
"width percentage(%) / events": {},
|
||||
"min-height length(pt) / values": {},
|
||||
"min-height length(pt) / events": {},
|
||||
"min-height length(pc) / values": {},
|
||||
"min-height length(pc) / events": {},
|
||||
"min-height length(px) / values": {},
|
||||
"min-height length(px) / events": {},
|
||||
"min-height length(em) / values": {},
|
||||
"min-height length(em) / events": {},
|
||||
"min-height length(ex) / values": {},
|
||||
"min-height length(ex) / events": {},
|
||||
"min-height length(mm) / values": {},
|
||||
"min-height length(mm) / events": {},
|
||||
"min-height length(cm) / values": {},
|
||||
"min-height length(cm) / events": {},
|
||||
"min-height length(in) / values": {},
|
||||
"min-height length(in) / events": {},
|
||||
"min-height percentage(%) / values": {},
|
||||
"min-height percentage(%) / events": {},
|
||||
"min-width length(pt) / values": {},
|
||||
"min-width length(pt) / events": {},
|
||||
"min-width length(pc) / values": {},
|
||||
"min-width length(pc) / events": {},
|
||||
"min-width length(px) / values": {},
|
||||
"min-width length(px) / events": {},
|
||||
"min-width length(em) / values": {},
|
||||
"min-width length(em) / events": {},
|
||||
"min-width length(ex) / values": {},
|
||||
"min-width length(ex) / events": {},
|
||||
"min-width length(mm) / values": {},
|
||||
"min-width length(mm) / events": {},
|
||||
"min-width length(cm) / values": {},
|
||||
"min-width length(cm) / events": {},
|
||||
"min-width length(in) / values": {},
|
||||
"min-width length(in) / events": {},
|
||||
"min-width percentage(%) / values": {},
|
||||
"min-width percentage(%) / events": {},
|
||||
"max-height length(pt) / values": {},
|
||||
"max-height length(pt) / events": {},
|
||||
"max-height length(pc) / values": {},
|
||||
"max-height length(pc) / events": {},
|
||||
"max-height length(px) / values": {},
|
||||
"max-height length(px) / events": {},
|
||||
"max-height length(em) / values": {},
|
||||
"max-height length(em) / events": {},
|
||||
"max-height length(ex) / values": {},
|
||||
"max-height length(ex) / events": {},
|
||||
"max-height length(mm) / values": {},
|
||||
"max-height length(mm) / events": {},
|
||||
"max-height length(cm) / values": {},
|
||||
"max-height length(cm) / events": {},
|
||||
"max-height length(in) / values": {},
|
||||
"max-height length(in) / events": {},
|
||||
"max-height percentage(%) / values": {},
|
||||
"max-height percentage(%) / events": {},
|
||||
"max-width length(pt) / values": {},
|
||||
"max-width length(pt) / events": {},
|
||||
"max-width length(pc) / values": {},
|
||||
"max-width length(pc) / events": {},
|
||||
"max-width length(px) / values": {},
|
||||
"max-width length(px) / events": {},
|
||||
"max-width length(em) / values": {},
|
||||
"max-width length(em) / events": {},
|
||||
"max-width length(ex) / values": {},
|
||||
"max-width length(ex) / events": {},
|
||||
"max-width length(mm) / values": {},
|
||||
"max-width length(mm) / events": {},
|
||||
"max-width length(cm) / values": {},
|
||||
"max-width length(cm) / events": {},
|
||||
"max-width length(in) / values": {},
|
||||
"max-width length(in) / events": {},
|
||||
"max-width percentage(%) / values": {},
|
||||
"max-width percentage(%) / events": {},
|
||||
"top length(pt) / values": {},
|
||||
"top length(pt) / events": {},
|
||||
"top length(pc) / values": {},
|
||||
"top length(pc) / events": {},
|
||||
"top length(px) / values": {},
|
||||
"top length(px) / events": {},
|
||||
"top length(em) / values": {},
|
||||
"top length(em) / events": {},
|
||||
"top length(ex) / values": {},
|
||||
"top length(ex) / events": {},
|
||||
"top length(mm) / values": {},
|
||||
"top length(mm) / events": {},
|
||||
"top length(cm) / values": {},
|
||||
"top length(cm) / events": {},
|
||||
"top length(in) / values": {},
|
||||
"top length(in) / events": {},
|
||||
"top percentage(%) / values": {},
|
||||
"top percentage(%) / events": {},
|
||||
"right length(pt) / values": {},
|
||||
"right length(pt) / events": {},
|
||||
"right length(pc) / values": {},
|
||||
"right length(pc) / events": {},
|
||||
"right length(px) / values": {},
|
||||
"right length(px) / events": {},
|
||||
"right length(em) / values": {},
|
||||
"right length(em) / events": {},
|
||||
"right length(ex) / values": {},
|
||||
"right length(ex) / events": {},
|
||||
"right length(mm) / values": {},
|
||||
"right length(mm) / events": {},
|
||||
"right length(cm) / values": {},
|
||||
"right length(cm) / events": {},
|
||||
"right length(in) / values": {},
|
||||
"right length(in) / events": {},
|
||||
"right percentage(%) / values": {},
|
||||
"right percentage(%) / events": {},
|
||||
"bottom length(pt) / values": {},
|
||||
"bottom length(pt) / events": {},
|
||||
"bottom length(pc) / values": {},
|
||||
"bottom length(pc) / events": {},
|
||||
"bottom length(px) / values": {},
|
||||
"bottom length(px) / events": {},
|
||||
"bottom length(em) / values": {},
|
||||
"bottom length(em) / events": {},
|
||||
"bottom length(ex) / values": {},
|
||||
"bottom length(ex) / events": {},
|
||||
"bottom length(mm) / values": {},
|
||||
"bottom length(mm) / events": {},
|
||||
"bottom length(cm) / values": {},
|
||||
"bottom length(cm) / events": {},
|
||||
"bottom length(in) / values": {},
|
||||
"bottom length(in) / events": {},
|
||||
"bottom percentage(%) / values": {},
|
||||
"bottom percentage(%) / events": {},
|
||||
"left length(pt) / values": {},
|
||||
"left length(pt) / events": {},
|
||||
"left length(pc) / values": {},
|
||||
"left length(pc) / events": {},
|
||||
"left length(px) / values": {},
|
||||
"left length(px) / events": {},
|
||||
"left length(em) / values": {},
|
||||
"left length(em) / events": {},
|
||||
"left length(ex) / values": {},
|
||||
"left length(ex) / events": {},
|
||||
"left length(mm) / values": {},
|
||||
"left length(mm) / events": {},
|
||||
"left length(cm) / values": {},
|
||||
"left length(cm) / events": {},
|
||||
"left length(in) / values": {},
|
||||
"left length(in) / events": {},
|
||||
"left percentage(%) / values": {},
|
||||
"left percentage(%) / events": {},
|
||||
"color color(rgba) / values": {},
|
||||
"color color(rgba) / events": {},
|
||||
"font-size length(pt) / values": {},
|
||||
"font-size length(pt) / events": {},
|
||||
"font-size length(pc) / values": {},
|
||||
"font-size length(pc) / events": {},
|
||||
"font-size length(px) / values": {},
|
||||
"font-size length(px) / events": {},
|
||||
"font-size length(em) / values": {},
|
||||
"font-size length(em) / events": {},
|
||||
"font-size length(ex) / values": {},
|
||||
"font-size length(ex) / events": {},
|
||||
"font-size length(mm) / values": {},
|
||||
"font-size length(mm) / events": {},
|
||||
"font-size length(cm) / values": {},
|
||||
"font-size length(cm) / events": {},
|
||||
"font-size length(in) / values": {},
|
||||
"font-size length(in) / events": {},
|
||||
"font-size percentage(%) / values": {},
|
||||
"font-size percentage(%) / events": {},
|
||||
"font-weight font-weight(keyword) / values": {},
|
||||
"font-weight font-weight(keyword) / events": {},
|
||||
"font-weight font-weight(numeric) / values": {},
|
||||
"font-weight font-weight(numeric) / events": {},
|
||||
"line-height number(integer) / values": {},
|
||||
"line-height number(integer) / events": {},
|
||||
"line-height number(decimal) / values": {},
|
||||
"line-height number(decimal) / events": {},
|
||||
"line-height length(pt) / values": {},
|
||||
"line-height length(pt) / events": {},
|
||||
"line-height length(pc) / values": {},
|
||||
"line-height length(pc) / events": {},
|
||||
"line-height length(px) / values": {},
|
||||
"line-height length(px) / events": {},
|
||||
"line-height length(em) / values": {},
|
||||
"line-height length(em) / events": {},
|
||||
"line-height length(ex) / values": {},
|
||||
"line-height length(ex) / events": {},
|
||||
"line-height length(mm) / values": {},
|
||||
"line-height length(mm) / events": {},
|
||||
"line-height length(cm) / values": {},
|
||||
"line-height length(cm) / events": {},
|
||||
"line-height length(in) / values": {},
|
||||
"line-height length(in) / events": {},
|
||||
"line-height percentage(%) / values": {},
|
||||
"line-height percentage(%) / events": {},
|
||||
"letter-spacing length(pt) / values": {},
|
||||
"letter-spacing length(pt) / events": {},
|
||||
"letter-spacing length(pc) / values": {},
|
||||
"letter-spacing length(pc) / events": {},
|
||||
"letter-spacing length(px) / values": {},
|
||||
"letter-spacing length(px) / events": {},
|
||||
"letter-spacing length(em) / values": {},
|
||||
"letter-spacing length(em) / events": {},
|
||||
"letter-spacing length(ex) / values": {},
|
||||
"letter-spacing length(ex) / events": {},
|
||||
"letter-spacing length(mm) / values": {},
|
||||
"letter-spacing length(mm) / events": {},
|
||||
"letter-spacing length(cm) / values": {},
|
||||
"letter-spacing length(cm) / events": {},
|
||||
"letter-spacing length(in) / values": {},
|
||||
"letter-spacing length(in) / events": {},
|
||||
"word-spacing length(pt) / values": {},
|
||||
"word-spacing length(pt) / events": {},
|
||||
"word-spacing length(pc) / values": {},
|
||||
"word-spacing length(pc) / events": {},
|
||||
"word-spacing length(px) / values": {},
|
||||
"word-spacing length(px) / events": {},
|
||||
"word-spacing length(em) / values": {},
|
||||
"word-spacing length(em) / events": {},
|
||||
"word-spacing length(ex) / values": {},
|
||||
"word-spacing length(ex) / events": {},
|
||||
"word-spacing length(mm) / values": {},
|
||||
"word-spacing length(mm) / events": {},
|
||||
"word-spacing length(cm) / values": {},
|
||||
"word-spacing length(cm) / events": {},
|
||||
"word-spacing length(in) / values": {},
|
||||
"word-spacing length(in) / events": {},
|
||||
"word-spacing percentage(%) / values": {},
|
||||
"word-spacing percentage(%) / events": {},
|
||||
"text-indent length(pt) / values": {},
|
||||
"text-indent length(pt) / events": {},
|
||||
"text-indent length(pc) / values": {},
|
||||
"text-indent length(pc) / events": {},
|
||||
"text-indent length(px) / values": {},
|
||||
"text-indent length(px) / events": {},
|
||||
"text-indent length(em) / values": {},
|
||||
"text-indent length(em) / events": {},
|
||||
"text-indent length(ex) / values": {},
|
||||
"text-indent length(ex) / events": {},
|
||||
"text-indent length(mm) / values": {},
|
||||
"text-indent length(mm) / events": {},
|
||||
"text-indent length(cm) / values": {},
|
||||
"text-indent length(cm) / events": {},
|
||||
"text-indent length(in) / values": {},
|
||||
"text-indent length(in) / events": {},
|
||||
"text-indent percentage(%) / values": {},
|
||||
"text-indent percentage(%) / events": {},
|
||||
"text-shadow shadow(shadow) / values": {},
|
||||
"text-shadow shadow(shadow) / events": {},
|
||||
"outline-color color(rgba) / values": {},
|
||||
"outline-color color(rgba) / events": {},
|
||||
"outline-offset length(pt) / values": {},
|
||||
"outline-offset length(pt) / events": {},
|
||||
"outline-offset length(pc) / values": {},
|
||||
"outline-offset length(pc) / events": {},
|
||||
"outline-offset length(px) / values": {},
|
||||
"outline-offset length(px) / events": {},
|
||||
"outline-offset length(em) / values": {},
|
||||
"outline-offset length(em) / events": {},
|
||||
"outline-offset length(ex) / values": {},
|
||||
"outline-offset length(ex) / events": {},
|
||||
"outline-offset length(mm) / values": {},
|
||||
"outline-offset length(mm) / events": {},
|
||||
"outline-offset length(cm) / values": {},
|
||||
"outline-offset length(cm) / events": {},
|
||||
"outline-offset length(in) / values": {},
|
||||
"outline-offset length(in) / events": {},
|
||||
"outline-width length(pt) / values": {},
|
||||
"outline-width length(pt) / events": {},
|
||||
"outline-width length(pc) / values": {},
|
||||
"outline-width length(pc) / events": {},
|
||||
"outline-width length(px) / values": {},
|
||||
"outline-width length(px) / events": {},
|
||||
"outline-width length(em) / values": {},
|
||||
"outline-width length(em) / events": {},
|
||||
"outline-width length(ex) / values": {},
|
||||
"outline-width length(ex) / events": {},
|
||||
"outline-width length(mm) / values": {},
|
||||
"outline-width length(mm) / events": {},
|
||||
"outline-width length(cm) / values": {},
|
||||
"outline-width length(cm) / events": {},
|
||||
"outline-width length(in) / values": {},
|
||||
"outline-width length(in) / events": {},
|
||||
"clip rectangle(rectangle) / values": {},
|
||||
"clip rectangle(rectangle) / events": {},
|
||||
"crop rectangle(rectangle) / values": {},
|
||||
"crop rectangle(rectangle) / events": {},
|
||||
"vertical-align length(pt) / values": {},
|
||||
"vertical-align length(pt) / events": {},
|
||||
"vertical-align length(pc) / values": {},
|
||||
"vertical-align length(pc) / events": {},
|
||||
"vertical-align length(px) / values": {},
|
||||
"vertical-align length(px) / events": {},
|
||||
"vertical-align length(em) / values": {},
|
||||
"vertical-align length(em) / events": {},
|
||||
"vertical-align length(ex) / values": {},
|
||||
"vertical-align length(ex) / events": {},
|
||||
"vertical-align length(mm) / values": {},
|
||||
"vertical-align length(mm) / events": {},
|
||||
"vertical-align length(cm) / values": {},
|
||||
"vertical-align length(cm) / events": {},
|
||||
"vertical-align length(in) / values": {},
|
||||
"vertical-align length(in) / events": {},
|
||||
"vertical-align percentage(%) / values": {},
|
||||
"vertical-align percentage(%) / events": {},
|
||||
"opacity number[0,1](zero-to-one) / values": {},
|
||||
"opacity number[0,1](zero-to-one) / events": {},
|
||||
"visibility visibility(keyword) / values": {},
|
||||
"visibility visibility(keyword) / events": {},
|
||||
"z-index integer(integer) / values": {},
|
||||
"z-index integer(integer) / 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>
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values of missing value types</title>
|
||||
<meta content="Test checks that expected value types that haven't been specified are transitionable" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<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">/*
|
||||
{
|
||||
"margin-bottom percentage(%) / values": {},
|
||||
"margin-bottom percentage(%) / events": {},
|
||||
"margin-left percentage(%) / values": {},
|
||||
"margin-left percentage(%) / events": {},
|
||||
"margin-right percentage(%) / values": {},
|
||||
"margin-right percentage(%) / events": {},
|
||||
"margin-top percentage(%) / values": {},
|
||||
"margin-top percentage(%) / events": {},
|
||||
"padding-bottom percentage(%) / values": {},
|
||||
"padding-bottom percentage(%) / events": {},
|
||||
"padding-left percentage(%) / values": {},
|
||||
"padding-left percentage(%) / events": {},
|
||||
"padding-right percentage(%) / values": {},
|
||||
"padding-right percentage(%) / events": {},
|
||||
"padding-top percentage(%) / values": {},
|
||||
"padding-top percentage(%) / events": {},
|
||||
"vertical-align vertical(keyword) / values": {},
|
||||
"vertical-align vertical(keyword) / 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>
|
||||
// this suite tests property value types that haven't been specified
|
||||
// (like <percentage> for margin-bottom)
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getMissingPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values of unspecified properties</title>
|
||||
<meta content="Test checks that properties are transitionable that haven't been specified" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<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">/*
|
||||
{
|
||||
"border-top-left-radius border-radius(px) / values": {},
|
||||
"border-top-left-radius border-radius(px) / events": {},
|
||||
"border-top-left-radius border-radius(px-px) / values": {},
|
||||
"border-top-left-radius border-radius(px-px) / events": {},
|
||||
"border-top-right-radius border-radius(px) / values": {},
|
||||
"border-top-right-radius border-radius(px) / events": {},
|
||||
"border-top-right-radius border-radius(px-px) / values": {},
|
||||
"border-top-right-radius border-radius(px-px) / events": {},
|
||||
"border-bottom-left-radius border-radius(px) / values": {},
|
||||
"border-bottom-left-radius border-radius(px) / events": {},
|
||||
"border-bottom-left-radius border-radius(px-px) / values": {},
|
||||
"border-bottom-left-radius border-radius(px-px) / events": {},
|
||||
"border-bottom-right-radius border-radius(px) / values": {},
|
||||
"border-bottom-right-radius border-radius(px) / events": {},
|
||||
"border-bottom-right-radius border-radius(px-px) / values": {},
|
||||
"border-bottom-right-radius border-radius(px-px) / events": {},
|
||||
"background-image image(url) / values": {},
|
||||
"background-image image(url) / events": {},
|
||||
"background-image image(data) / values": {},
|
||||
"background-image image(data) / events": {},
|
||||
"background-image image(gradient) / values": {},
|
||||
"background-image image(gradient) / events": {},
|
||||
"background-size background-size(keyword) / values": {},
|
||||
"background-size background-size(keyword) / events": {},
|
||||
"box-shadow box-shadow(shadow) / values": {},
|
||||
"box-shadow box-shadow(shadow) / events": {},
|
||||
"font-size-adjust number(integer) / values": {},
|
||||
"font-size-adjust number(integer) / events": {},
|
||||
"font-size-adjust number(decimal) / values": {},
|
||||
"font-size-adjust number(decimal) / events": {},
|
||||
"font-stretch font-stretch(keyword) / values": {},
|
||||
"font-stretch font-stretch(keyword) / events": {},
|
||||
"marker-offset length(pt) / values": {},
|
||||
"marker-offset length(pt) / events": {},
|
||||
"marker-offset length(pc) / values": {},
|
||||
"marker-offset length(pc) / events": {},
|
||||
"marker-offset length(px) / values": {},
|
||||
"marker-offset length(px) / events": {},
|
||||
"marker-offset length(em) / values": {},
|
||||
"marker-offset length(em) / events": {},
|
||||
"marker-offset length(ex) / values": {},
|
||||
"marker-offset length(ex) / events": {},
|
||||
"marker-offset length(mm) / values": {},
|
||||
"marker-offset length(mm) / events": {},
|
||||
"marker-offset length(cm) / values": {},
|
||||
"marker-offset length(cm) / events": {},
|
||||
"marker-offset length(in) / values": {},
|
||||
"marker-offset length(in) / events": {},
|
||||
"text-decoration-color color(rgba) / values": {},
|
||||
"text-decoration-color color(rgba) / events": {},
|
||||
"column-count integer(integer) / values": {},
|
||||
"column-count integer(integer) / events": {},
|
||||
"column-gap length(pt) / values": {},
|
||||
"column-gap length(pt) / events": {},
|
||||
"column-gap length(pc) / values": {},
|
||||
"column-gap length(pc) / events": {},
|
||||
"column-gap length(px) / values": {},
|
||||
"column-gap length(px) / events": {},
|
||||
"column-gap length(em) / values": {},
|
||||
"column-gap length(em) / events": {},
|
||||
"column-gap length(ex) / values": {},
|
||||
"column-gap length(ex) / events": {},
|
||||
"column-gap length(mm) / values": {},
|
||||
"column-gap length(mm) / events": {},
|
||||
"column-gap length(cm) / values": {},
|
||||
"column-gap length(cm) / events": {},
|
||||
"column-gap length(in) / values": {},
|
||||
"column-gap length(in) / events": {},
|
||||
"column-rule-color color(rgba) / values": {},
|
||||
"column-rule-color color(rgba) / events": {},
|
||||
"column-rule-width length(pt) / values": {},
|
||||
"column-rule-width length(pt) / events": {},
|
||||
"column-rule-width length(pc) / values": {},
|
||||
"column-rule-width length(pc) / events": {},
|
||||
"column-rule-width length(px) / values": {},
|
||||
"column-rule-width length(px) / events": {},
|
||||
"column-rule-width length(em) / values": {},
|
||||
"column-rule-width length(em) / events": {},
|
||||
"column-rule-width length(ex) / values": {},
|
||||
"column-rule-width length(ex) / events": {},
|
||||
"column-rule-width length(mm) / values": {},
|
||||
"column-rule-width length(mm) / events": {},
|
||||
"column-rule-width length(cm) / values": {},
|
||||
"column-rule-width length(cm) / events": {},
|
||||
"column-rule-width length(in) / values": {},
|
||||
"column-rule-width length(in) / events": {},
|
||||
"column-width length(pt) / values": {},
|
||||
"column-width length(pt) / events": {},
|
||||
"column-width length(pc) / values": {},
|
||||
"column-width length(pc) / events": {},
|
||||
"column-width length(px) / values": {},
|
||||
"column-width length(px) / events": {},
|
||||
"column-width length(em) / values": {},
|
||||
"column-width length(em) / events": {},
|
||||
"column-width length(ex) / values": {},
|
||||
"column-width length(ex) / events": {},
|
||||
"column-width length(mm) / values": {},
|
||||
"column-width length(mm) / events": {},
|
||||
"column-width length(cm) / values": {},
|
||||
"column-width length(cm) / events": {},
|
||||
"column-width length(in) / values": {},
|
||||
"column-width length(in) / events": {},
|
||||
"transform transform(rotate) / values": {},
|
||||
"transform transform(rotate) / events": {},
|
||||
"transform-origin horizontal(keyword) / values": {},
|
||||
"transform-origin horizontal(keyword) / events": {},
|
||||
"zoom number(integer) / values": {},
|
||||
"zoom number(integer) / events": {},
|
||||
"zoom number(decimal) / values": {},
|
||||
"zoom number(decimal) / events": {},
|
||||
"outline-radius-topleft length(pt) / values": {},
|
||||
"outline-radius-topleft length(pt) / events": {},
|
||||
"outline-radius-topleft length(pc) / values": {},
|
||||
"outline-radius-topleft length(pc) / events": {},
|
||||
"outline-radius-topleft length(px) / values": {},
|
||||
"outline-radius-topleft length(px) / events": {},
|
||||
"outline-radius-topleft length(em) / values": {},
|
||||
"outline-radius-topleft length(em) / events": {},
|
||||
"outline-radius-topleft length(ex) / values": {},
|
||||
"outline-radius-topleft length(ex) / events": {},
|
||||
"outline-radius-topleft length(mm) / values": {},
|
||||
"outline-radius-topleft length(mm) / events": {},
|
||||
"outline-radius-topleft length(cm) / values": {},
|
||||
"outline-radius-topleft length(cm) / events": {},
|
||||
"outline-radius-topleft length(in) / values": {},
|
||||
"outline-radius-topleft length(in) / events": {},
|
||||
"outline-radius-topleft percentage(%) / values": {},
|
||||
"outline-radius-topleft percentage(%) / events": {},
|
||||
"outline-radius-topright length(pt) / values": {},
|
||||
"outline-radius-topright length(pt) / events": {},
|
||||
"outline-radius-topright length(pc) / values": {},
|
||||
"outline-radius-topright length(pc) / events": {},
|
||||
"outline-radius-topright length(px) / values": {},
|
||||
"outline-radius-topright length(px) / events": {},
|
||||
"outline-radius-topright length(em) / values": {},
|
||||
"outline-radius-topright length(em) / events": {},
|
||||
"outline-radius-topright length(ex) / values": {},
|
||||
"outline-radius-topright length(ex) / events": {},
|
||||
"outline-radius-topright length(mm) / values": {},
|
||||
"outline-radius-topright length(mm) / events": {},
|
||||
"outline-radius-topright length(cm) / values": {},
|
||||
"outline-radius-topright length(cm) / events": {},
|
||||
"outline-radius-topright length(in) / values": {},
|
||||
"outline-radius-topright length(in) / events": {},
|
||||
"outline-radius-topright percentage(%) / values": {},
|
||||
"outline-radius-topright percentage(%) / events": {},
|
||||
"outline-radius-bottomright length(pt) / values": {},
|
||||
"outline-radius-bottomright length(pt) / events": {},
|
||||
"outline-radius-bottomright length(pc) / values": {},
|
||||
"outline-radius-bottomright length(pc) / events": {},
|
||||
"outline-radius-bottomright length(px) / values": {},
|
||||
"outline-radius-bottomright length(px) / events": {},
|
||||
"outline-radius-bottomright length(em) / values": {},
|
||||
"outline-radius-bottomright length(em) / events": {},
|
||||
"outline-radius-bottomright length(ex) / values": {},
|
||||
"outline-radius-bottomright length(ex) / events": {},
|
||||
"outline-radius-bottomright length(mm) / values": {},
|
||||
"outline-radius-bottomright length(mm) / events": {},
|
||||
"outline-radius-bottomright length(cm) / values": {},
|
||||
"outline-radius-bottomright length(cm) / events": {},
|
||||
"outline-radius-bottomright length(in) / values": {},
|
||||
"outline-radius-bottomright length(in) / events": {},
|
||||
"outline-radius-bottomright percentage(%) / values": {},
|
||||
"outline-radius-bottomright percentage(%) / events": {},
|
||||
"outline-radius-bottomleft length(pt) / values": {},
|
||||
"outline-radius-bottomleft length(pt) / events": {},
|
||||
"outline-radius-bottomleft length(pc) / values": {},
|
||||
"outline-radius-bottomleft length(pc) / events": {},
|
||||
"outline-radius-bottomleft length(px) / values": {},
|
||||
"outline-radius-bottomleft length(px) / events": {},
|
||||
"outline-radius-bottomleft length(em) / values": {},
|
||||
"outline-radius-bottomleft length(em) / events": {},
|
||||
"outline-radius-bottomleft length(ex) / values": {},
|
||||
"outline-radius-bottomleft length(ex) / events": {},
|
||||
"outline-radius-bottomleft length(mm) / values": {},
|
||||
"outline-radius-bottomleft length(mm) / events": {},
|
||||
"outline-radius-bottomleft length(cm) / values": {},
|
||||
"outline-radius-bottomleft length(cm) / events": {},
|
||||
"outline-radius-bottomleft length(in) / values": {},
|
||||
"outline-radius-bottomleft length(in) / events": {},
|
||||
"outline-radius-bottomleft percentage(%) / values": {},
|
||||
"outline-radius-bottomleft percentage(%) / events": {},
|
||||
"display display(static to absolute) / values": {},
|
||||
"display display(static to absolute) / events": {},
|
||||
"display display(block to inline-block) / values": {},
|
||||
"display display(block to inline-block) / events": {},
|
||||
"position position(static to absolute) / values": {},
|
||||
"position position(static to absolute) / events": {},
|
||||
"position position(relative to absolute) / values": {},
|
||||
"position position(relative to absolute) / events": {},
|
||||
"position position(absolute to fixed) / values": {},
|
||||
"position position(absolute to fixed) / 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>
|
||||
// see README.md for an explanation of how this test suite works
|
||||
// this suite tests properties that haven't been specified at all
|
||||
// (like background-image and column-rule-width)
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getUnspecifiedPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning property value "auto"</title>
|
||||
<meta content="Test checks that properties are transitioned from an to auto-value" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<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">/*
|
||||
{
|
||||
"margin-top auto(to) / values": {},
|
||||
"margin-top auto(to) / events": {},
|
||||
"margin-top auto(from) / values": {},
|
||||
"margin-top auto(from) / events": {},
|
||||
"margin-right auto(to) / values": {},
|
||||
"margin-right auto(to) / events": {},
|
||||
"margin-right auto(from) / values": {},
|
||||
"margin-right auto(from) / events": {},
|
||||
"margin-bottom auto(to) / values": {},
|
||||
"margin-bottom auto(to) / events": {},
|
||||
"margin-bottom auto(from) / values": {},
|
||||
"margin-bottom auto(from) / events": {},
|
||||
"margin-left auto(to) / values": {},
|
||||
"margin-left auto(to) / events": {},
|
||||
"margin-left auto(from) / values": {},
|
||||
"margin-left auto(from) / events": {},
|
||||
"height auto(to) / values": {},
|
||||
"height auto(to) / events": {},
|
||||
"height auto(from) / values": {},
|
||||
"height auto(from) / events": {},
|
||||
"width auto(to) / values": {},
|
||||
"width auto(to) / events": {},
|
||||
"width auto(from) / values": {},
|
||||
"width auto(from) / events": {},
|
||||
"clip auto(to) / values": {},
|
||||
"clip auto(to) / events": {},
|
||||
"clip auto(from) / values": {},
|
||||
"clip auto(from) / events": {},
|
||||
"marker-offset auto(to) / values": {},
|
||||
"marker-offset auto(to) / events": {},
|
||||
"marker-offset auto(from) / values": {},
|
||||
"marker-offset auto(from) / events": {},
|
||||
"top auto(to) / values": {},
|
||||
"top auto(to) / events": {},
|
||||
"top auto(from) / values": {},
|
||||
"top auto(from) / events": {},
|
||||
"right auto(to) / values": {},
|
||||
"right auto(to) / events": {},
|
||||
"right auto(from) / values": {},
|
||||
"right auto(from) / events": {},
|
||||
"left auto(to) / values": {},
|
||||
"left auto(to) / events": {},
|
||||
"left auto(from) / values": {},
|
||||
"left auto(from) / events": {},
|
||||
"bottom auto(to) / values": {},
|
||||
"bottom auto(to) / events": {},
|
||||
"bottom auto(from) / values": {},
|
||||
"bottom auto(from) / events": {},
|
||||
"z-index auto(to) / values": {},
|
||||
"z-index auto(to) / events": {},
|
||||
"z-index auto(from) / values": {},
|
||||
"z-index auto(from) / 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>
|
||||
// see README.md for an explanation of how this test suite works
|
||||
// this suite tests properties that haven't been specified at all
|
||||
// (like background-image and column-rule-width)
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getAutoPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: font-size-relative properties transition by implicit value change</title>
|
||||
<meta content="Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<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">/*
|
||||
{
|
||||
"background-position length-em(em) / values": {},
|
||||
"background-position length-em(em) / events": {},
|
||||
"border-top-width length-em(em) / values": {},
|
||||
"border-top-width length-em(em) / events": {},
|
||||
"border-right-width length-em(em) / values": {},
|
||||
"border-right-width length-em(em) / events": {},
|
||||
"border-bottom-width length-em(em) / values": {},
|
||||
"border-bottom-width length-em(em) / events": {},
|
||||
"border-left-width length-em(em) / values": {},
|
||||
"border-left-width length-em(em) / events": {},
|
||||
"padding-bottom length-em(em) / values": {},
|
||||
"padding-bottom length-em(em) / events": {},
|
||||
"padding-left length-em(em) / values": {},
|
||||
"padding-left length-em(em) / events": {},
|
||||
"padding-right length-em(em) / values": {},
|
||||
"padding-right length-em(em) / events": {},
|
||||
"padding-top length-em(em) / values": {},
|
||||
"padding-top length-em(em) / events": {},
|
||||
"margin-bottom length-em(em) / values": {},
|
||||
"margin-bottom length-em(em) / events": {},
|
||||
"margin-left length-em(em) / values": {},
|
||||
"margin-left length-em(em) / events": {},
|
||||
"margin-right length-em(em) / values": {},
|
||||
"margin-right length-em(em) / events": {},
|
||||
"margin-top length-em(em) / values": {},
|
||||
"margin-top length-em(em) / events": {},
|
||||
"height length-em(em) / values": {},
|
||||
"height length-em(em) / events": {},
|
||||
"width length-em(em) / values": {},
|
||||
"width length-em(em) / events": {},
|
||||
"min-height length-em(em) / values": {},
|
||||
"min-height length-em(em) / events": {},
|
||||
"min-width length-em(em) / values": {},
|
||||
"min-width length-em(em) / events": {},
|
||||
"max-height length-em(em) / values": {},
|
||||
"max-height length-em(em) / events": {},
|
||||
"max-width length-em(em) / values": {},
|
||||
"max-width length-em(em) / events": {},
|
||||
"top length-em(em) / values": {},
|
||||
"top length-em(em) / events": {},
|
||||
"right length-em(em) / values": {},
|
||||
"right length-em(em) / events": {},
|
||||
"bottom length-em(em) / values": {},
|
||||
"bottom length-em(em) / events": {},
|
||||
"left length-em(em) / values": {},
|
||||
"left length-em(em) / events": {},
|
||||
"line-height length-em(em) / values": {},
|
||||
"line-height length-em(em) / events": {},
|
||||
"letter-spacing length-em(em) / values": {},
|
||||
"letter-spacing length-em(em) / events": {},
|
||||
"word-spacing length-em(em) / values": {},
|
||||
"word-spacing length-em(em) / events": {},
|
||||
"text-indent length-em(em) / values": {},
|
||||
"text-indent length-em(em) / events": {},
|
||||
"outline-offset length-em(em) / values": {},
|
||||
"outline-offset length-em(em) / events": {},
|
||||
"outline-width length-em(em) / values": {},
|
||||
"outline-width length-em(em) / events": {},
|
||||
"vertical-align length-em(em) / values": {},
|
||||
"vertical-align length-em(em) / 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>
|
||||
// see README.md for an explanation of how this test suite works
|
||||
// this suite tests properties that haven't been specified at all
|
||||
// (like background-image and column-rule-width)
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getFontSizeRelativePropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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) {
|
||||
// as we're dealing with em-based lengths, we need to define a font-size
|
||||
data.from['font-size'] = '20px';
|
||||
data.to['font-size'] = '30px';
|
||||
// remove property from target style so it won't transition on its own
|
||||
delete data.to[data.property];
|
||||
|
||||
var styles = {
|
||||
'.fixture': {},
|
||||
|
||||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,710 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning inherited property values</title>
|
||||
<meta content="Test checks that inherited property values that are transitioned on a parent element don't start a transition" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<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">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
"background-color color(rgba) / events": {},
|
||||
"background-position length(pt) / values": {},
|
||||
"background-position length(pt) / events": {},
|
||||
"background-position length(pc) / values": {},
|
||||
"background-position length(pc) / events": {},
|
||||
"background-position length(px) / values": {},
|
||||
"background-position length(px) / events": {},
|
||||
"background-position length(em) / values": {},
|
||||
"background-position length(em) / events": {},
|
||||
"background-position length(ex) / values": {},
|
||||
"background-position length(ex) / events": {},
|
||||
"background-position length(mm) / values": {},
|
||||
"background-position length(mm) / events": {},
|
||||
"background-position length(cm) / values": {},
|
||||
"background-position length(cm) / events": {},
|
||||
"background-position length(in) / values": {},
|
||||
"background-position length(in) / events": {},
|
||||
"background-position percentage(%) / values": {},
|
||||
"background-position percentage(%) / events": {},
|
||||
"border-top-width length(pt) / values": {},
|
||||
"border-top-width length(pt) / events": {},
|
||||
"border-top-width length(pc) / values": {},
|
||||
"border-top-width length(pc) / events": {},
|
||||
"border-top-width length(px) / values": {},
|
||||
"border-top-width length(px) / events": {},
|
||||
"border-top-width length(em) / values": {},
|
||||
"border-top-width length(em) / events": {},
|
||||
"border-top-width length(ex) / values": {},
|
||||
"border-top-width length(ex) / events": {},
|
||||
"border-top-width length(mm) / values": {},
|
||||
"border-top-width length(mm) / events": {},
|
||||
"border-top-width length(cm) / values": {},
|
||||
"border-top-width length(cm) / events": {},
|
||||
"border-top-width length(in) / values": {},
|
||||
"border-top-width length(in) / events": {},
|
||||
"border-right-width length(pt) / values": {},
|
||||
"border-right-width length(pt) / events": {},
|
||||
"border-right-width length(pc) / values": {},
|
||||
"border-right-width length(pc) / events": {},
|
||||
"border-right-width length(px) / values": {},
|
||||
"border-right-width length(px) / events": {},
|
||||
"border-right-width length(em) / values": {},
|
||||
"border-right-width length(em) / events": {},
|
||||
"border-right-width length(ex) / values": {},
|
||||
"border-right-width length(ex) / events": {},
|
||||
"border-right-width length(mm) / values": {},
|
||||
"border-right-width length(mm) / events": {},
|
||||
"border-right-width length(cm) / values": {},
|
||||
"border-right-width length(cm) / events": {},
|
||||
"border-right-width length(in) / values": {},
|
||||
"border-right-width length(in) / events": {},
|
||||
"border-bottom-width length(pt) / values": {},
|
||||
"border-bottom-width length(pt) / events": {},
|
||||
"border-bottom-width length(pc) / values": {},
|
||||
"border-bottom-width length(pc) / events": {},
|
||||
"border-bottom-width length(px) / values": {},
|
||||
"border-bottom-width length(px) / events": {},
|
||||
"border-bottom-width length(em) / values": {},
|
||||
"border-bottom-width length(em) / events": {},
|
||||
"border-bottom-width length(ex) / values": {},
|
||||
"border-bottom-width length(ex) / events": {},
|
||||
"border-bottom-width length(mm) / values": {},
|
||||
"border-bottom-width length(mm) / events": {},
|
||||
"border-bottom-width length(cm) / values": {},
|
||||
"border-bottom-width length(cm) / events": {},
|
||||
"border-bottom-width length(in) / values": {},
|
||||
"border-bottom-width length(in) / events": {},
|
||||
"border-left-width length(pt) / values": {},
|
||||
"border-left-width length(pt) / events": {},
|
||||
"border-left-width length(pc) / values": {},
|
||||
"border-left-width length(pc) / events": {},
|
||||
"border-left-width length(px) / values": {},
|
||||
"border-left-width length(px) / events": {},
|
||||
"border-left-width length(em) / values": {},
|
||||
"border-left-width length(em) / events": {},
|
||||
"border-left-width length(ex) / values": {},
|
||||
"border-left-width length(ex) / events": {},
|
||||
"border-left-width length(mm) / values": {},
|
||||
"border-left-width length(mm) / events": {},
|
||||
"border-left-width length(cm) / values": {},
|
||||
"border-left-width length(cm) / events": {},
|
||||
"border-left-width length(in) / values": {},
|
||||
"border-left-width length(in) / events": {},
|
||||
"border-top-color color(rgba) / values": {},
|
||||
"border-top-color color(rgba) / events": {},
|
||||
"border-right-color color(rgba) / values": {},
|
||||
"border-right-color color(rgba) / events": {},
|
||||
"border-bottom-color color(rgba) / values": {},
|
||||
"border-bottom-color color(rgba) / events": {},
|
||||
"border-left-color color(rgba) / values": {},
|
||||
"border-left-color color(rgba) / events": {},
|
||||
"padding-bottom length(pt) / values": {},
|
||||
"padding-bottom length(pt) / events": {},
|
||||
"padding-bottom length(pc) / values": {},
|
||||
"padding-bottom length(pc) / events": {},
|
||||
"padding-bottom length(px) / values": {},
|
||||
"padding-bottom length(px) / events": {},
|
||||
"padding-bottom length(em) / values": {},
|
||||
"padding-bottom length(em) / events": {},
|
||||
"padding-bottom length(ex) / values": {},
|
||||
"padding-bottom length(ex) / events": {},
|
||||
"padding-bottom length(mm) / values": {},
|
||||
"padding-bottom length(mm) / events": {},
|
||||
"padding-bottom length(cm) / values": {},
|
||||
"padding-bottom length(cm) / events": {},
|
||||
"padding-bottom length(in) / values": {},
|
||||
"padding-bottom length(in) / events": {},
|
||||
"padding-left length(pt) / values": {},
|
||||
"padding-left length(pt) / events": {},
|
||||
"padding-left length(pc) / values": {},
|
||||
"padding-left length(pc) / events": {},
|
||||
"padding-left length(px) / values": {},
|
||||
"padding-left length(px) / events": {},
|
||||
"padding-left length(em) / values": {},
|
||||
"padding-left length(em) / events": {},
|
||||
"padding-left length(ex) / values": {},
|
||||
"padding-left length(ex) / events": {},
|
||||
"padding-left length(mm) / values": {},
|
||||
"padding-left length(mm) / events": {},
|
||||
"padding-left length(cm) / values": {},
|
||||
"padding-left length(cm) / events": {},
|
||||
"padding-left length(in) / values": {},
|
||||
"padding-left length(in) / events": {},
|
||||
"padding-right length(pt) / values": {},
|
||||
"padding-right length(pt) / events": {},
|
||||
"padding-right length(pc) / values": {},
|
||||
"padding-right length(pc) / events": {},
|
||||
"padding-right length(px) / values": {},
|
||||
"padding-right length(px) / events": {},
|
||||
"padding-right length(em) / values": {},
|
||||
"padding-right length(em) / events": {},
|
||||
"padding-right length(ex) / values": {},
|
||||
"padding-right length(ex) / events": {},
|
||||
"padding-right length(mm) / values": {},
|
||||
"padding-right length(mm) / events": {},
|
||||
"padding-right length(cm) / values": {},
|
||||
"padding-right length(cm) / events": {},
|
||||
"padding-right length(in) / values": {},
|
||||
"padding-right length(in) / events": {},
|
||||
"padding-top length(pt) / values": {},
|
||||
"padding-top length(pt) / events": {},
|
||||
"padding-top length(pc) / values": {},
|
||||
"padding-top length(pc) / events": {},
|
||||
"padding-top length(px) / values": {},
|
||||
"padding-top length(px) / events": {},
|
||||
"padding-top length(em) / values": {},
|
||||
"padding-top length(em) / events": {},
|
||||
"padding-top length(ex) / values": {},
|
||||
"padding-top length(ex) / events": {},
|
||||
"padding-top length(mm) / values": {},
|
||||
"padding-top length(mm) / events": {},
|
||||
"padding-top length(cm) / values": {},
|
||||
"padding-top length(cm) / events": {},
|
||||
"padding-top length(in) / values": {},
|
||||
"padding-top length(in) / events": {},
|
||||
"margin-bottom length(pt) / values": {},
|
||||
"margin-bottom length(pt) / events": {},
|
||||
"margin-bottom length(pc) / values": {},
|
||||
"margin-bottom length(pc) / events": {},
|
||||
"margin-bottom length(px) / values": {},
|
||||
"margin-bottom length(px) / events": {},
|
||||
"margin-bottom length(em) / values": {},
|
||||
"margin-bottom length(em) / events": {},
|
||||
"margin-bottom length(ex) / values": {},
|
||||
"margin-bottom length(ex) / events": {},
|
||||
"margin-bottom length(mm) / values": {},
|
||||
"margin-bottom length(mm) / events": {},
|
||||
"margin-bottom length(cm) / values": {},
|
||||
"margin-bottom length(cm) / events": {},
|
||||
"margin-bottom length(in) / values": {},
|
||||
"margin-bottom length(in) / events": {},
|
||||
"margin-left length(pt) / values": {},
|
||||
"margin-left length(pt) / events": {},
|
||||
"margin-left length(pc) / values": {},
|
||||
"margin-left length(pc) / events": {},
|
||||
"margin-left length(px) / values": {},
|
||||
"margin-left length(px) / events": {},
|
||||
"margin-left length(em) / values": {},
|
||||
"margin-left length(em) / events": {},
|
||||
"margin-left length(ex) / values": {},
|
||||
"margin-left length(ex) / events": {},
|
||||
"margin-left length(mm) / values": {},
|
||||
"margin-left length(mm) / events": {},
|
||||
"margin-left length(cm) / values": {},
|
||||
"margin-left length(cm) / events": {},
|
||||
"margin-left length(in) / values": {},
|
||||
"margin-left length(in) / events": {},
|
||||
"margin-right length(pt) / values": {},
|
||||
"margin-right length(pt) / events": {},
|
||||
"margin-right length(pc) / values": {},
|
||||
"margin-right length(pc) / events": {},
|
||||
"margin-right length(px) / values": {},
|
||||
"margin-right length(px) / events": {},
|
||||
"margin-right length(em) / values": {},
|
||||
"margin-right length(em) / events": {},
|
||||
"margin-right length(ex) / values": {},
|
||||
"margin-right length(ex) / events": {},
|
||||
"margin-right length(mm) / values": {},
|
||||
"margin-right length(mm) / events": {},
|
||||
"margin-right length(cm) / values": {},
|
||||
"margin-right length(cm) / events": {},
|
||||
"margin-right length(in) / values": {},
|
||||
"margin-right length(in) / events": {},
|
||||
"margin-top length(pt) / values": {},
|
||||
"margin-top length(pt) / events": {},
|
||||
"margin-top length(pc) / values": {},
|
||||
"margin-top length(pc) / events": {},
|
||||
"margin-top length(px) / values": {},
|
||||
"margin-top length(px) / events": {},
|
||||
"margin-top length(em) / values": {},
|
||||
"margin-top length(em) / events": {},
|
||||
"margin-top length(ex) / values": {},
|
||||
"margin-top length(ex) / events": {},
|
||||
"margin-top length(mm) / values": {},
|
||||
"margin-top length(mm) / events": {},
|
||||
"margin-top length(cm) / values": {},
|
||||
"margin-top length(cm) / events": {},
|
||||
"margin-top length(in) / values": {},
|
||||
"margin-top length(in) / events": {},
|
||||
"height length(pt) / values": {},
|
||||
"height length(pt) / events": {},
|
||||
"height length(pc) / values": {},
|
||||
"height length(pc) / events": {},
|
||||
"height length(px) / values": {},
|
||||
"height length(px) / events": {},
|
||||
"height length(em) / values": {},
|
||||
"height length(em) / events": {},
|
||||
"height length(ex) / values": {},
|
||||
"height length(ex) / events": {},
|
||||
"height length(mm) / values": {},
|
||||
"height length(mm) / events": {},
|
||||
"height length(cm) / values": {},
|
||||
"height length(cm) / events": {},
|
||||
"height length(in) / values": {},
|
||||
"height length(in) / events": {},
|
||||
"height percentage(%) / values": {},
|
||||
"height percentage(%) / events": {},
|
||||
"width length(pt) / values": {},
|
||||
"width length(pt) / events": {},
|
||||
"width length(pc) / values": {},
|
||||
"width length(pc) / events": {},
|
||||
"width length(px) / values": {},
|
||||
"width length(px) / events": {},
|
||||
"width length(em) / values": {},
|
||||
"width length(em) / events": {},
|
||||
"width length(ex) / values": {},
|
||||
"width length(ex) / events": {},
|
||||
"width length(mm) / values": {},
|
||||
"width length(mm) / events": {},
|
||||
"width length(cm) / values": {},
|
||||
"width length(cm) / events": {},
|
||||
"width length(in) / values": {},
|
||||
"width length(in) / events": {},
|
||||
"width percentage(%) / values": {},
|
||||
"width percentage(%) / events": {},
|
||||
"min-height length(pt) / values": {},
|
||||
"min-height length(pt) / events": {},
|
||||
"min-height length(pc) / values": {},
|
||||
"min-height length(pc) / events": {},
|
||||
"min-height length(px) / values": {},
|
||||
"min-height length(px) / events": {},
|
||||
"min-height length(em) / values": {},
|
||||
"min-height length(em) / events": {},
|
||||
"min-height length(ex) / values": {},
|
||||
"min-height length(ex) / events": {},
|
||||
"min-height length(mm) / values": {},
|
||||
"min-height length(mm) / events": {},
|
||||
"min-height length(cm) / values": {},
|
||||
"min-height length(cm) / events": {},
|
||||
"min-height length(in) / values": {},
|
||||
"min-height length(in) / events": {},
|
||||
"min-height percentage(%) / values": {},
|
||||
"min-height percentage(%) / events": {},
|
||||
"min-width length(pt) / values": {},
|
||||
"min-width length(pt) / events": {},
|
||||
"min-width length(pc) / values": {},
|
||||
"min-width length(pc) / events": {},
|
||||
"min-width length(px) / values": {},
|
||||
"min-width length(px) / events": {},
|
||||
"min-width length(em) / values": {},
|
||||
"min-width length(em) / events": {},
|
||||
"min-width length(ex) / values": {},
|
||||
"min-width length(ex) / events": {},
|
||||
"min-width length(mm) / values": {},
|
||||
"min-width length(mm) / events": {},
|
||||
"min-width length(cm) / values": {},
|
||||
"min-width length(cm) / events": {},
|
||||
"min-width length(in) / values": {},
|
||||
"min-width length(in) / events": {},
|
||||
"min-width percentage(%) / values": {},
|
||||
"min-width percentage(%) / events": {},
|
||||
"max-height length(pt) / values": {},
|
||||
"max-height length(pt) / events": {},
|
||||
"max-height length(pc) / values": {},
|
||||
"max-height length(pc) / events": {},
|
||||
"max-height length(px) / values": {},
|
||||
"max-height length(px) / events": {},
|
||||
"max-height length(em) / values": {},
|
||||
"max-height length(em) / events": {},
|
||||
"max-height length(ex) / values": {},
|
||||
"max-height length(ex) / events": {},
|
||||
"max-height length(mm) / values": {},
|
||||
"max-height length(mm) / events": {},
|
||||
"max-height length(cm) / values": {},
|
||||
"max-height length(cm) / events": {},
|
||||
"max-height length(in) / values": {},
|
||||
"max-height length(in) / events": {},
|
||||
"max-height percentage(%) / values": {},
|
||||
"max-height percentage(%) / events": {},
|
||||
"max-width length(pt) / values": {},
|
||||
"max-width length(pt) / events": {},
|
||||
"max-width length(pc) / values": {},
|
||||
"max-width length(pc) / events": {},
|
||||
"max-width length(px) / values": {},
|
||||
"max-width length(px) / events": {},
|
||||
"max-width length(em) / values": {},
|
||||
"max-width length(em) / events": {},
|
||||
"max-width length(ex) / values": {},
|
||||
"max-width length(ex) / events": {},
|
||||
"max-width length(mm) / values": {},
|
||||
"max-width length(mm) / events": {},
|
||||
"max-width length(cm) / values": {},
|
||||
"max-width length(cm) / events": {},
|
||||
"max-width length(in) / values": {},
|
||||
"max-width length(in) / events": {},
|
||||
"max-width percentage(%) / values": {},
|
||||
"max-width percentage(%) / events": {},
|
||||
"top length(pt) / values": {},
|
||||
"top length(pt) / events": {},
|
||||
"top length(pc) / values": {},
|
||||
"top length(pc) / events": {},
|
||||
"top length(px) / values": {},
|
||||
"top length(px) / events": {},
|
||||
"top length(em) / values": {},
|
||||
"top length(em) / events": {},
|
||||
"top length(ex) / values": {},
|
||||
"top length(ex) / events": {},
|
||||
"top length(mm) / values": {},
|
||||
"top length(mm) / events": {},
|
||||
"top length(cm) / values": {},
|
||||
"top length(cm) / events": {},
|
||||
"top length(in) / values": {},
|
||||
"top length(in) / events": {},
|
||||
"top percentage(%) / values": {},
|
||||
"top percentage(%) / events": {},
|
||||
"right length(pt) / values": {},
|
||||
"right length(pt) / events": {},
|
||||
"right length(pc) / values": {},
|
||||
"right length(pc) / events": {},
|
||||
"right length(px) / values": {},
|
||||
"right length(px) / events": {},
|
||||
"right length(em) / values": {},
|
||||
"right length(em) / events": {},
|
||||
"right length(ex) / values": {},
|
||||
"right length(ex) / events": {},
|
||||
"right length(mm) / values": {},
|
||||
"right length(mm) / events": {},
|
||||
"right length(cm) / values": {},
|
||||
"right length(cm) / events": {},
|
||||
"right length(in) / values": {},
|
||||
"right length(in) / events": {},
|
||||
"right percentage(%) / values": {},
|
||||
"right percentage(%) / events": {},
|
||||
"bottom length(pt) / values": {},
|
||||
"bottom length(pt) / events": {},
|
||||
"bottom length(pc) / values": {},
|
||||
"bottom length(pc) / events": {},
|
||||
"bottom length(px) / values": {},
|
||||
"bottom length(px) / events": {},
|
||||
"bottom length(em) / values": {},
|
||||
"bottom length(em) / events": {},
|
||||
"bottom length(ex) / values": {},
|
||||
"bottom length(ex) / events": {},
|
||||
"bottom length(mm) / values": {},
|
||||
"bottom length(mm) / events": {},
|
||||
"bottom length(cm) / values": {},
|
||||
"bottom length(cm) / events": {},
|
||||
"bottom length(in) / values": {},
|
||||
"bottom length(in) / events": {},
|
||||
"bottom percentage(%) / values": {},
|
||||
"bottom percentage(%) / events": {},
|
||||
"left length(pt) / values": {},
|
||||
"left length(pt) / events": {},
|
||||
"left length(pc) / values": {},
|
||||
"left length(pc) / events": {},
|
||||
"left length(px) / values": {},
|
||||
"left length(px) / events": {},
|
||||
"left length(em) / values": {},
|
||||
"left length(em) / events": {},
|
||||
"left length(ex) / values": {},
|
||||
"left length(ex) / events": {},
|
||||
"left length(mm) / values": {},
|
||||
"left length(mm) / events": {},
|
||||
"left length(cm) / values": {},
|
||||
"left length(cm) / events": {},
|
||||
"left length(in) / values": {},
|
||||
"left length(in) / events": {},
|
||||
"left percentage(%) / values": {},
|
||||
"left percentage(%) / events": {},
|
||||
"color color(rgba) / values": {},
|
||||
"color color(rgba) / events": {},
|
||||
"font-size length(pt) / values": {},
|
||||
"font-size length(pt) / events": {},
|
||||
"font-size length(pc) / values": {},
|
||||
"font-size length(pc) / events": {},
|
||||
"font-size length(px) / values": {},
|
||||
"font-size length(px) / events": {},
|
||||
"font-size length(em) / values": {},
|
||||
"font-size length(em) / events": {},
|
||||
"font-size length(ex) / values": {},
|
||||
"font-size length(ex) / events": {},
|
||||
"font-size length(mm) / values": {},
|
||||
"font-size length(mm) / events": {},
|
||||
"font-size length(cm) / values": {},
|
||||
"font-size length(cm) / events": {},
|
||||
"font-size length(in) / values": {},
|
||||
"font-size length(in) / events": {},
|
||||
"font-size percentage(%) / values": {},
|
||||
"font-size percentage(%) / events": {},
|
||||
"font-weight font-weight(keyword) / values": {},
|
||||
"font-weight font-weight(keyword) / events": {},
|
||||
"font-weight font-weight(numeric) / values": {},
|
||||
"font-weight font-weight(numeric) / events": {},
|
||||
"line-height number(integer) / values": {},
|
||||
"line-height number(integer) / events": {},
|
||||
"line-height number(decimal) / values": {},
|
||||
"line-height number(decimal) / events": {},
|
||||
"line-height length(pt) / values": {},
|
||||
"line-height length(pt) / events": {},
|
||||
"line-height length(pc) / values": {},
|
||||
"line-height length(pc) / events": {},
|
||||
"line-height length(px) / values": {},
|
||||
"line-height length(px) / events": {},
|
||||
"line-height length(em) / values": {},
|
||||
"line-height length(em) / events": {},
|
||||
"line-height length(ex) / values": {},
|
||||
"line-height length(ex) / events": {},
|
||||
"line-height length(mm) / values": {},
|
||||
"line-height length(mm) / events": {},
|
||||
"line-height length(cm) / values": {},
|
||||
"line-height length(cm) / events": {},
|
||||
"line-height length(in) / values": {},
|
||||
"line-height length(in) / events": {},
|
||||
"line-height percentage(%) / values": {},
|
||||
"line-height percentage(%) / events": {},
|
||||
"letter-spacing length(pt) / values": {},
|
||||
"letter-spacing length(pt) / events": {},
|
||||
"letter-spacing length(pc) / values": {},
|
||||
"letter-spacing length(pc) / events": {},
|
||||
"letter-spacing length(px) / values": {},
|
||||
"letter-spacing length(px) / events": {},
|
||||
"letter-spacing length(em) / values": {},
|
||||
"letter-spacing length(em) / events": {},
|
||||
"letter-spacing length(ex) / values": {},
|
||||
"letter-spacing length(ex) / events": {},
|
||||
"letter-spacing length(mm) / values": {},
|
||||
"letter-spacing length(mm) / events": {},
|
||||
"letter-spacing length(cm) / values": {},
|
||||
"letter-spacing length(cm) / events": {},
|
||||
"letter-spacing length(in) / values": {},
|
||||
"letter-spacing length(in) / events": {},
|
||||
"word-spacing length(pt) / values": {},
|
||||
"word-spacing length(pt) / events": {},
|
||||
"word-spacing length(pc) / values": {},
|
||||
"word-spacing length(pc) / events": {},
|
||||
"word-spacing length(px) / values": {},
|
||||
"word-spacing length(px) / events": {},
|
||||
"word-spacing length(em) / values": {},
|
||||
"word-spacing length(em) / events": {},
|
||||
"word-spacing length(ex) / values": {},
|
||||
"word-spacing length(ex) / events": {},
|
||||
"word-spacing length(mm) / values": {},
|
||||
"word-spacing length(mm) / events": {},
|
||||
"word-spacing length(cm) / values": {},
|
||||
"word-spacing length(cm) / events": {},
|
||||
"word-spacing length(in) / values": {},
|
||||
"word-spacing length(in) / events": {},
|
||||
"word-spacing percentage(%) / values": {},
|
||||
"word-spacing percentage(%) / events": {},
|
||||
"text-indent length(pt) / values": {},
|
||||
"text-indent length(pt) / events": {},
|
||||
"text-indent length(pc) / values": {},
|
||||
"text-indent length(pc) / events": {},
|
||||
"text-indent length(px) / values": {},
|
||||
"text-indent length(px) / events": {},
|
||||
"text-indent length(em) / values": {},
|
||||
"text-indent length(em) / events": {},
|
||||
"text-indent length(ex) / values": {},
|
||||
"text-indent length(ex) / events": {},
|
||||
"text-indent length(mm) / values": {},
|
||||
"text-indent length(mm) / events": {},
|
||||
"text-indent length(cm) / values": {},
|
||||
"text-indent length(cm) / events": {},
|
||||
"text-indent length(in) / values": {},
|
||||
"text-indent length(in) / events": {},
|
||||
"text-indent percentage(%) / values": {},
|
||||
"text-indent percentage(%) / events": {},
|
||||
"text-shadow shadow(shadow) / values": {},
|
||||
"text-shadow shadow(shadow) / events": {},
|
||||
"outline-color color(rgba) / values": {},
|
||||
"outline-color color(rgba) / events": {},
|
||||
"outline-offset length(pt) / values": {},
|
||||
"outline-offset length(pt) / events": {},
|
||||
"outline-offset length(pc) / values": {},
|
||||
"outline-offset length(pc) / events": {},
|
||||
"outline-offset length(px) / values": {},
|
||||
"outline-offset length(px) / events": {},
|
||||
"outline-offset length(em) / values": {},
|
||||
"outline-offset length(em) / events": {},
|
||||
"outline-offset length(ex) / values": {},
|
||||
"outline-offset length(ex) / events": {},
|
||||
"outline-offset length(mm) / values": {},
|
||||
"outline-offset length(mm) / events": {},
|
||||
"outline-offset length(cm) / values": {},
|
||||
"outline-offset length(cm) / events": {},
|
||||
"outline-offset length(in) / values": {},
|
||||
"outline-offset length(in) / events": {},
|
||||
"outline-width length(pt) / values": {},
|
||||
"outline-width length(pt) / events": {},
|
||||
"outline-width length(pc) / values": {},
|
||||
"outline-width length(pc) / events": {},
|
||||
"outline-width length(px) / values": {},
|
||||
"outline-width length(px) / events": {},
|
||||
"outline-width length(em) / values": {},
|
||||
"outline-width length(em) / events": {},
|
||||
"outline-width length(ex) / values": {},
|
||||
"outline-width length(ex) / events": {},
|
||||
"outline-width length(mm) / values": {},
|
||||
"outline-width length(mm) / events": {},
|
||||
"outline-width length(cm) / values": {},
|
||||
"outline-width length(cm) / events": {},
|
||||
"outline-width length(in) / values": {},
|
||||
"outline-width length(in) / events": {},
|
||||
"clip rectangle(rectangle) / values": {},
|
||||
"clip rectangle(rectangle) / events": {},
|
||||
"crop rectangle(rectangle) / values": {},
|
||||
"crop rectangle(rectangle) / events": {},
|
||||
"vertical-align length(pt) / values": {},
|
||||
"vertical-align length(pt) / events": {},
|
||||
"vertical-align length(pc) / values": {},
|
||||
"vertical-align length(pc) / events": {},
|
||||
"vertical-align length(px) / values": {},
|
||||
"vertical-align length(px) / events": {},
|
||||
"vertical-align length(em) / values": {},
|
||||
"vertical-align length(em) / events": {},
|
||||
"vertical-align length(ex) / values": {},
|
||||
"vertical-align length(ex) / events": {},
|
||||
"vertical-align length(mm) / values": {},
|
||||
"vertical-align length(mm) / events": {},
|
||||
"vertical-align length(cm) / values": {},
|
||||
"vertical-align length(cm) / events": {},
|
||||
"vertical-align length(in) / values": {},
|
||||
"vertical-align length(in) / events": {},
|
||||
"vertical-align percentage(%) / values": {},
|
||||
"vertical-align percentage(%) / events": {},
|
||||
"opacity number[0,1](zero-to-one) / values": {},
|
||||
"opacity number[0,1](zero-to-one) / events": {},
|
||||
"visibility visibility(keyword) / values": {},
|
||||
"visibility visibility(keyword) / events": {},
|
||||
"z-index integer(integer) / values": {},
|
||||
"z-index integer(integer) / 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>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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) {
|
||||
// clone and overwrite initial styles to be
|
||||
// applied to #transition
|
||||
var inherited = extend({}, data.from);
|
||||
inherited[data.property] = 'inherit';
|
||||
|
||||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
// all styles including transition apply to to #container so they
|
||||
// can inherit down to #transition
|
||||
'.container': extend({}, data.parentStyle, data.from),
|
||||
'.container.to': data.to,
|
||||
'.container.how': {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'},
|
||||
// #transition only inherits and listens for transition events
|
||||
'.transition': inherited,
|
||||
'.transition.to' : {},
|
||||
'.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', addVendorPrefix(data.property) + ":" + duration));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,711 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning inherited property values</title>
|
||||
<meta content="Test checks that inherited property values that are not transitioned on a parent element start a transition" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<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">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
"background-color color(rgba) / events": {},
|
||||
"background-position length(pt) / values": {},
|
||||
"background-position length(pt) / events": {},
|
||||
"background-position length(pc) / values": {},
|
||||
"background-position length(pc) / events": {},
|
||||
"background-position length(px) / values": {},
|
||||
"background-position length(px) / events": {},
|
||||
"background-position length(em) / values": {},
|
||||
"background-position length(em) / events": {},
|
||||
"background-position length(ex) / values": {},
|
||||
"background-position length(ex) / events": {},
|
||||
"background-position length(mm) / values": {},
|
||||
"background-position length(mm) / events": {},
|
||||
"background-position length(cm) / values": {},
|
||||
"background-position length(cm) / events": {},
|
||||
"background-position length(in) / values": {},
|
||||
"background-position length(in) / events": {},
|
||||
"background-position percentage(%) / values": {},
|
||||
"background-position percentage(%) / events": {},
|
||||
"border-top-width length(pt) / values": {},
|
||||
"border-top-width length(pt) / events": {},
|
||||
"border-top-width length(pc) / values": {},
|
||||
"border-top-width length(pc) / events": {},
|
||||
"border-top-width length(px) / values": {},
|
||||
"border-top-width length(px) / events": {},
|
||||
"border-top-width length(em) / values": {},
|
||||
"border-top-width length(em) / events": {},
|
||||
"border-top-width length(ex) / values": {},
|
||||
"border-top-width length(ex) / events": {},
|
||||
"border-top-width length(mm) / values": {},
|
||||
"border-top-width length(mm) / events": {},
|
||||
"border-top-width length(cm) / values": {},
|
||||
"border-top-width length(cm) / events": {},
|
||||
"border-top-width length(in) / values": {},
|
||||
"border-top-width length(in) / events": {},
|
||||
"border-right-width length(pt) / values": {},
|
||||
"border-right-width length(pt) / events": {},
|
||||
"border-right-width length(pc) / values": {},
|
||||
"border-right-width length(pc) / events": {},
|
||||
"border-right-width length(px) / values": {},
|
||||
"border-right-width length(px) / events": {},
|
||||
"border-right-width length(em) / values": {},
|
||||
"border-right-width length(em) / events": {},
|
||||
"border-right-width length(ex) / values": {},
|
||||
"border-right-width length(ex) / events": {},
|
||||
"border-right-width length(mm) / values": {},
|
||||
"border-right-width length(mm) / events": {},
|
||||
"border-right-width length(cm) / values": {},
|
||||
"border-right-width length(cm) / events": {},
|
||||
"border-right-width length(in) / values": {},
|
||||
"border-right-width length(in) / events": {},
|
||||
"border-bottom-width length(pt) / values": {},
|
||||
"border-bottom-width length(pt) / events": {},
|
||||
"border-bottom-width length(pc) / values": {},
|
||||
"border-bottom-width length(pc) / events": {},
|
||||
"border-bottom-width length(px) / values": {},
|
||||
"border-bottom-width length(px) / events": {},
|
||||
"border-bottom-width length(em) / values": {},
|
||||
"border-bottom-width length(em) / events": {},
|
||||
"border-bottom-width length(ex) / values": {},
|
||||
"border-bottom-width length(ex) / events": {},
|
||||
"border-bottom-width length(mm) / values": {},
|
||||
"border-bottom-width length(mm) / events": {},
|
||||
"border-bottom-width length(cm) / values": {},
|
||||
"border-bottom-width length(cm) / events": {},
|
||||
"border-bottom-width length(in) / values": {},
|
||||
"border-bottom-width length(in) / events": {},
|
||||
"border-left-width length(pt) / values": {},
|
||||
"border-left-width length(pt) / events": {},
|
||||
"border-left-width length(pc) / values": {},
|
||||
"border-left-width length(pc) / events": {},
|
||||
"border-left-width length(px) / values": {},
|
||||
"border-left-width length(px) / events": {},
|
||||
"border-left-width length(em) / values": {},
|
||||
"border-left-width length(em) / events": {},
|
||||
"border-left-width length(ex) / values": {},
|
||||
"border-left-width length(ex) / events": {},
|
||||
"border-left-width length(mm) / values": {},
|
||||
"border-left-width length(mm) / events": {},
|
||||
"border-left-width length(cm) / values": {},
|
||||
"border-left-width length(cm) / events": {},
|
||||
"border-left-width length(in) / values": {},
|
||||
"border-left-width length(in) / events": {},
|
||||
"border-top-color color(rgba) / values": {},
|
||||
"border-top-color color(rgba) / events": {},
|
||||
"border-right-color color(rgba) / values": {},
|
||||
"border-right-color color(rgba) / events": {},
|
||||
"border-bottom-color color(rgba) / values": {},
|
||||
"border-bottom-color color(rgba) / events": {},
|
||||
"border-left-color color(rgba) / values": {},
|
||||
"border-left-color color(rgba) / events": {},
|
||||
"padding-bottom length(pt) / values": {},
|
||||
"padding-bottom length(pt) / events": {},
|
||||
"padding-bottom length(pc) / values": {},
|
||||
"padding-bottom length(pc) / events": {},
|
||||
"padding-bottom length(px) / values": {},
|
||||
"padding-bottom length(px) / events": {},
|
||||
"padding-bottom length(em) / values": {},
|
||||
"padding-bottom length(em) / events": {},
|
||||
"padding-bottom length(ex) / values": {},
|
||||
"padding-bottom length(ex) / events": {},
|
||||
"padding-bottom length(mm) / values": {},
|
||||
"padding-bottom length(mm) / events": {},
|
||||
"padding-bottom length(cm) / values": {},
|
||||
"padding-bottom length(cm) / events": {},
|
||||
"padding-bottom length(in) / values": {},
|
||||
"padding-bottom length(in) / events": {},
|
||||
"padding-left length(pt) / values": {},
|
||||
"padding-left length(pt) / events": {},
|
||||
"padding-left length(pc) / values": {},
|
||||
"padding-left length(pc) / events": {},
|
||||
"padding-left length(px) / values": {},
|
||||
"padding-left length(px) / events": {},
|
||||
"padding-left length(em) / values": {},
|
||||
"padding-left length(em) / events": {},
|
||||
"padding-left length(ex) / values": {},
|
||||
"padding-left length(ex) / events": {},
|
||||
"padding-left length(mm) / values": {},
|
||||
"padding-left length(mm) / events": {},
|
||||
"padding-left length(cm) / values": {},
|
||||
"padding-left length(cm) / events": {},
|
||||
"padding-left length(in) / values": {},
|
||||
"padding-left length(in) / events": {},
|
||||
"padding-right length(pt) / values": {},
|
||||
"padding-right length(pt) / events": {},
|
||||
"padding-right length(pc) / values": {},
|
||||
"padding-right length(pc) / events": {},
|
||||
"padding-right length(px) / values": {},
|
||||
"padding-right length(px) / events": {},
|
||||
"padding-right length(em) / values": {},
|
||||
"padding-right length(em) / events": {},
|
||||
"padding-right length(ex) / values": {},
|
||||
"padding-right length(ex) / events": {},
|
||||
"padding-right length(mm) / values": {},
|
||||
"padding-right length(mm) / events": {},
|
||||
"padding-right length(cm) / values": {},
|
||||
"padding-right length(cm) / events": {},
|
||||
"padding-right length(in) / values": {},
|
||||
"padding-right length(in) / events": {},
|
||||
"padding-top length(pt) / values": {},
|
||||
"padding-top length(pt) / events": {},
|
||||
"padding-top length(pc) / values": {},
|
||||
"padding-top length(pc) / events": {},
|
||||
"padding-top length(px) / values": {},
|
||||
"padding-top length(px) / events": {},
|
||||
"padding-top length(em) / values": {},
|
||||
"padding-top length(em) / events": {},
|
||||
"padding-top length(ex) / values": {},
|
||||
"padding-top length(ex) / events": {},
|
||||
"padding-top length(mm) / values": {},
|
||||
"padding-top length(mm) / events": {},
|
||||
"padding-top length(cm) / values": {},
|
||||
"padding-top length(cm) / events": {},
|
||||
"padding-top length(in) / values": {},
|
||||
"padding-top length(in) / events": {},
|
||||
"margin-bottom length(pt) / values": {},
|
||||
"margin-bottom length(pt) / events": {},
|
||||
"margin-bottom length(pc) / values": {},
|
||||
"margin-bottom length(pc) / events": {},
|
||||
"margin-bottom length(px) / values": {},
|
||||
"margin-bottom length(px) / events": {},
|
||||
"margin-bottom length(em) / values": {},
|
||||
"margin-bottom length(em) / events": {},
|
||||
"margin-bottom length(ex) / values": {},
|
||||
"margin-bottom length(ex) / events": {},
|
||||
"margin-bottom length(mm) / values": {},
|
||||
"margin-bottom length(mm) / events": {},
|
||||
"margin-bottom length(cm) / values": {},
|
||||
"margin-bottom length(cm) / events": {},
|
||||
"margin-bottom length(in) / values": {},
|
||||
"margin-bottom length(in) / events": {},
|
||||
"margin-left length(pt) / values": {},
|
||||
"margin-left length(pt) / events": {},
|
||||
"margin-left length(pc) / values": {},
|
||||
"margin-left length(pc) / events": {},
|
||||
"margin-left length(px) / values": {},
|
||||
"margin-left length(px) / events": {},
|
||||
"margin-left length(em) / values": {},
|
||||
"margin-left length(em) / events": {},
|
||||
"margin-left length(ex) / values": {},
|
||||
"margin-left length(ex) / events": {},
|
||||
"margin-left length(mm) / values": {},
|
||||
"margin-left length(mm) / events": {},
|
||||
"margin-left length(cm) / values": {},
|
||||
"margin-left length(cm) / events": {},
|
||||
"margin-left length(in) / values": {},
|
||||
"margin-left length(in) / events": {},
|
||||
"margin-right length(pt) / values": {},
|
||||
"margin-right length(pt) / events": {},
|
||||
"margin-right length(pc) / values": {},
|
||||
"margin-right length(pc) / events": {},
|
||||
"margin-right length(px) / values": {},
|
||||
"margin-right length(px) / events": {},
|
||||
"margin-right length(em) / values": {},
|
||||
"margin-right length(em) / events": {},
|
||||
"margin-right length(ex) / values": {},
|
||||
"margin-right length(ex) / events": {},
|
||||
"margin-right length(mm) / values": {},
|
||||
"margin-right length(mm) / events": {},
|
||||
"margin-right length(cm) / values": {},
|
||||
"margin-right length(cm) / events": {},
|
||||
"margin-right length(in) / values": {},
|
||||
"margin-right length(in) / events": {},
|
||||
"margin-top length(pt) / values": {},
|
||||
"margin-top length(pt) / events": {},
|
||||
"margin-top length(pc) / values": {},
|
||||
"margin-top length(pc) / events": {},
|
||||
"margin-top length(px) / values": {},
|
||||
"margin-top length(px) / events": {},
|
||||
"margin-top length(em) / values": {},
|
||||
"margin-top length(em) / events": {},
|
||||
"margin-top length(ex) / values": {},
|
||||
"margin-top length(ex) / events": {},
|
||||
"margin-top length(mm) / values": {},
|
||||
"margin-top length(mm) / events": {},
|
||||
"margin-top length(cm) / values": {},
|
||||
"margin-top length(cm) / events": {},
|
||||
"margin-top length(in) / values": {},
|
||||
"margin-top length(in) / events": {},
|
||||
"height length(pt) / values": {},
|
||||
"height length(pt) / events": {},
|
||||
"height length(pc) / values": {},
|
||||
"height length(pc) / events": {},
|
||||
"height length(px) / values": {},
|
||||
"height length(px) / events": {},
|
||||
"height length(em) / values": {},
|
||||
"height length(em) / events": {},
|
||||
"height length(ex) / values": {},
|
||||
"height length(ex) / events": {},
|
||||
"height length(mm) / values": {},
|
||||
"height length(mm) / events": {},
|
||||
"height length(cm) / values": {},
|
||||
"height length(cm) / events": {},
|
||||
"height length(in) / values": {},
|
||||
"height length(in) / events": {},
|
||||
"height percentage(%) / values": {},
|
||||
"height percentage(%) / events": {},
|
||||
"width length(pt) / values": {},
|
||||
"width length(pt) / events": {},
|
||||
"width length(pc) / values": {},
|
||||
"width length(pc) / events": {},
|
||||
"width length(px) / values": {},
|
||||
"width length(px) / events": {},
|
||||
"width length(em) / values": {},
|
||||
"width length(em) / events": {},
|
||||
"width length(ex) / values": {},
|
||||
"width length(ex) / events": {},
|
||||
"width length(mm) / values": {},
|
||||
"width length(mm) / events": {},
|
||||
"width length(cm) / values": {},
|
||||
"width length(cm) / events": {},
|
||||
"width length(in) / values": {},
|
||||
"width length(in) / events": {},
|
||||
"width percentage(%) / values": {},
|
||||
"width percentage(%) / events": {},
|
||||
"min-height length(pt) / values": {},
|
||||
"min-height length(pt) / events": {},
|
||||
"min-height length(pc) / values": {},
|
||||
"min-height length(pc) / events": {},
|
||||
"min-height length(px) / values": {},
|
||||
"min-height length(px) / events": {},
|
||||
"min-height length(em) / values": {},
|
||||
"min-height length(em) / events": {},
|
||||
"min-height length(ex) / values": {},
|
||||
"min-height length(ex) / events": {},
|
||||
"min-height length(mm) / values": {},
|
||||
"min-height length(mm) / events": {},
|
||||
"min-height length(cm) / values": {},
|
||||
"min-height length(cm) / events": {},
|
||||
"min-height length(in) / values": {},
|
||||
"min-height length(in) / events": {},
|
||||
"min-height percentage(%) / values": {},
|
||||
"min-height percentage(%) / events": {},
|
||||
"min-width length(pt) / values": {},
|
||||
"min-width length(pt) / events": {},
|
||||
"min-width length(pc) / values": {},
|
||||
"min-width length(pc) / events": {},
|
||||
"min-width length(px) / values": {},
|
||||
"min-width length(px) / events": {},
|
||||
"min-width length(em) / values": {},
|
||||
"min-width length(em) / events": {},
|
||||
"min-width length(ex) / values": {},
|
||||
"min-width length(ex) / events": {},
|
||||
"min-width length(mm) / values": {},
|
||||
"min-width length(mm) / events": {},
|
||||
"min-width length(cm) / values": {},
|
||||
"min-width length(cm) / events": {},
|
||||
"min-width length(in) / values": {},
|
||||
"min-width length(in) / events": {},
|
||||
"min-width percentage(%) / values": {},
|
||||
"min-width percentage(%) / events": {},
|
||||
"max-height length(pt) / values": {},
|
||||
"max-height length(pt) / events": {},
|
||||
"max-height length(pc) / values": {},
|
||||
"max-height length(pc) / events": {},
|
||||
"max-height length(px) / values": {},
|
||||
"max-height length(px) / events": {},
|
||||
"max-height length(em) / values": {},
|
||||
"max-height length(em) / events": {},
|
||||
"max-height length(ex) / values": {},
|
||||
"max-height length(ex) / events": {},
|
||||
"max-height length(mm) / values": {},
|
||||
"max-height length(mm) / events": {},
|
||||
"max-height length(cm) / values": {},
|
||||
"max-height length(cm) / events": {},
|
||||
"max-height length(in) / values": {},
|
||||
"max-height length(in) / events": {},
|
||||
"max-height percentage(%) / values": {},
|
||||
"max-height percentage(%) / events": {},
|
||||
"max-width length(pt) / values": {},
|
||||
"max-width length(pt) / events": {},
|
||||
"max-width length(pc) / values": {},
|
||||
"max-width length(pc) / events": {},
|
||||
"max-width length(px) / values": {},
|
||||
"max-width length(px) / events": {},
|
||||
"max-width length(em) / values": {},
|
||||
"max-width length(em) / events": {},
|
||||
"max-width length(ex) / values": {},
|
||||
"max-width length(ex) / events": {},
|
||||
"max-width length(mm) / values": {},
|
||||
"max-width length(mm) / events": {},
|
||||
"max-width length(cm) / values": {},
|
||||
"max-width length(cm) / events": {},
|
||||
"max-width length(in) / values": {},
|
||||
"max-width length(in) / events": {},
|
||||
"max-width percentage(%) / values": {},
|
||||
"max-width percentage(%) / events": {},
|
||||
"top length(pt) / values": {},
|
||||
"top length(pt) / events": {},
|
||||
"top length(pc) / values": {},
|
||||
"top length(pc) / events": {},
|
||||
"top length(px) / values": {},
|
||||
"top length(px) / events": {},
|
||||
"top length(em) / values": {},
|
||||
"top length(em) / events": {},
|
||||
"top length(ex) / values": {},
|
||||
"top length(ex) / events": {},
|
||||
"top length(mm) / values": {},
|
||||
"top length(mm) / events": {},
|
||||
"top length(cm) / values": {},
|
||||
"top length(cm) / events": {},
|
||||
"top length(in) / values": {},
|
||||
"top length(in) / events": {},
|
||||
"top percentage(%) / values": {},
|
||||
"top percentage(%) / events": {},
|
||||
"right length(pt) / values": {},
|
||||
"right length(pt) / events": {},
|
||||
"right length(pc) / values": {},
|
||||
"right length(pc) / events": {},
|
||||
"right length(px) / values": {},
|
||||
"right length(px) / events": {},
|
||||
"right length(em) / values": {},
|
||||
"right length(em) / events": {},
|
||||
"right length(ex) / values": {},
|
||||
"right length(ex) / events": {},
|
||||
"right length(mm) / values": {},
|
||||
"right length(mm) / events": {},
|
||||
"right length(cm) / values": {},
|
||||
"right length(cm) / events": {},
|
||||
"right length(in) / values": {},
|
||||
"right length(in) / events": {},
|
||||
"right percentage(%) / values": {},
|
||||
"right percentage(%) / events": {},
|
||||
"bottom length(pt) / values": {},
|
||||
"bottom length(pt) / events": {},
|
||||
"bottom length(pc) / values": {},
|
||||
"bottom length(pc) / events": {},
|
||||
"bottom length(px) / values": {},
|
||||
"bottom length(px) / events": {},
|
||||
"bottom length(em) / values": {},
|
||||
"bottom length(em) / events": {},
|
||||
"bottom length(ex) / values": {},
|
||||
"bottom length(ex) / events": {},
|
||||
"bottom length(mm) / values": {},
|
||||
"bottom length(mm) / events": {},
|
||||
"bottom length(cm) / values": {},
|
||||
"bottom length(cm) / events": {},
|
||||
"bottom length(in) / values": {},
|
||||
"bottom length(in) / events": {},
|
||||
"bottom percentage(%) / values": {},
|
||||
"bottom percentage(%) / events": {},
|
||||
"left length(pt) / values": {},
|
||||
"left length(pt) / events": {},
|
||||
"left length(pc) / values": {},
|
||||
"left length(pc) / events": {},
|
||||
"left length(px) / values": {},
|
||||
"left length(px) / events": {},
|
||||
"left length(em) / values": {},
|
||||
"left length(em) / events": {},
|
||||
"left length(ex) / values": {},
|
||||
"left length(ex) / events": {},
|
||||
"left length(mm) / values": {},
|
||||
"left length(mm) / events": {},
|
||||
"left length(cm) / values": {},
|
||||
"left length(cm) / events": {},
|
||||
"left length(in) / values": {},
|
||||
"left length(in) / events": {},
|
||||
"left percentage(%) / values": {},
|
||||
"left percentage(%) / events": {},
|
||||
"color color(rgba) / values": {},
|
||||
"color color(rgba) / events": {},
|
||||
"font-size length(pt) / values": {},
|
||||
"font-size length(pt) / events": {},
|
||||
"font-size length(pc) / values": {},
|
||||
"font-size length(pc) / events": {},
|
||||
"font-size length(px) / values": {},
|
||||
"font-size length(px) / events": {},
|
||||
"font-size length(em) / values": {},
|
||||
"font-size length(em) / events": {},
|
||||
"font-size length(ex) / values": {},
|
||||
"font-size length(ex) / events": {},
|
||||
"font-size length(mm) / values": {},
|
||||
"font-size length(mm) / events": {},
|
||||
"font-size length(cm) / values": {},
|
||||
"font-size length(cm) / events": {},
|
||||
"font-size length(in) / values": {},
|
||||
"font-size length(in) / events": {},
|
||||
"font-size percentage(%) / values": {},
|
||||
"font-size percentage(%) / events": {},
|
||||
"font-weight font-weight(keyword) / values": {},
|
||||
"font-weight font-weight(keyword) / events": {},
|
||||
"font-weight font-weight(numeric) / values": {},
|
||||
"font-weight font-weight(numeric) / events": {},
|
||||
"line-height number(integer) / values": {},
|
||||
"line-height number(integer) / events": {},
|
||||
"line-height number(decimal) / values": {},
|
||||
"line-height number(decimal) / events": {},
|
||||
"line-height length(pt) / values": {},
|
||||
"line-height length(pt) / events": {},
|
||||
"line-height length(pc) / values": {},
|
||||
"line-height length(pc) / events": {},
|
||||
"line-height length(px) / values": {},
|
||||
"line-height length(px) / events": {},
|
||||
"line-height length(em) / values": {},
|
||||
"line-height length(em) / events": {},
|
||||
"line-height length(ex) / values": {},
|
||||
"line-height length(ex) / events": {},
|
||||
"line-height length(mm) / values": {},
|
||||
"line-height length(mm) / events": {},
|
||||
"line-height length(cm) / values": {},
|
||||
"line-height length(cm) / events": {},
|
||||
"line-height length(in) / values": {},
|
||||
"line-height length(in) / events": {},
|
||||
"line-height percentage(%) / values": {},
|
||||
"line-height percentage(%) / events": {},
|
||||
"letter-spacing length(pt) / values": {},
|
||||
"letter-spacing length(pt) / events": {},
|
||||
"letter-spacing length(pc) / values": {},
|
||||
"letter-spacing length(pc) / events": {},
|
||||
"letter-spacing length(px) / values": {},
|
||||
"letter-spacing length(px) / events": {},
|
||||
"letter-spacing length(em) / values": {},
|
||||
"letter-spacing length(em) / events": {},
|
||||
"letter-spacing length(ex) / values": {},
|
||||
"letter-spacing length(ex) / events": {},
|
||||
"letter-spacing length(mm) / values": {},
|
||||
"letter-spacing length(mm) / events": {},
|
||||
"letter-spacing length(cm) / values": {},
|
||||
"letter-spacing length(cm) / events": {},
|
||||
"letter-spacing length(in) / values": {},
|
||||
"letter-spacing length(in) / events": {},
|
||||
"word-spacing length(pt) / values": {},
|
||||
"word-spacing length(pt) / events": {},
|
||||
"word-spacing length(pc) / values": {},
|
||||
"word-spacing length(pc) / events": {},
|
||||
"word-spacing length(px) / values": {},
|
||||
"word-spacing length(px) / events": {},
|
||||
"word-spacing length(em) / values": {},
|
||||
"word-spacing length(em) / events": {},
|
||||
"word-spacing length(ex) / values": {},
|
||||
"word-spacing length(ex) / events": {},
|
||||
"word-spacing length(mm) / values": {},
|
||||
"word-spacing length(mm) / events": {},
|
||||
"word-spacing length(cm) / values": {},
|
||||
"word-spacing length(cm) / events": {},
|
||||
"word-spacing length(in) / values": {},
|
||||
"word-spacing length(in) / events": {},
|
||||
"word-spacing percentage(%) / values": {},
|
||||
"word-spacing percentage(%) / events": {},
|
||||
"text-indent length(pt) / values": {},
|
||||
"text-indent length(pt) / events": {},
|
||||
"text-indent length(pc) / values": {},
|
||||
"text-indent length(pc) / events": {},
|
||||
"text-indent length(px) / values": {},
|
||||
"text-indent length(px) / events": {},
|
||||
"text-indent length(em) / values": {},
|
||||
"text-indent length(em) / events": {},
|
||||
"text-indent length(ex) / values": {},
|
||||
"text-indent length(ex) / events": {},
|
||||
"text-indent length(mm) / values": {},
|
||||
"text-indent length(mm) / events": {},
|
||||
"text-indent length(cm) / values": {},
|
||||
"text-indent length(cm) / events": {},
|
||||
"text-indent length(in) / values": {},
|
||||
"text-indent length(in) / events": {},
|
||||
"text-indent percentage(%) / values": {},
|
||||
"text-indent percentage(%) / events": {},
|
||||
"text-shadow shadow(shadow) / values": {},
|
||||
"text-shadow shadow(shadow) / events": {},
|
||||
"outline-color color(rgba) / values": {},
|
||||
"outline-color color(rgba) / events": {},
|
||||
"outline-offset length(pt) / values": {},
|
||||
"outline-offset length(pt) / events": {},
|
||||
"outline-offset length(pc) / values": {},
|
||||
"outline-offset length(pc) / events": {},
|
||||
"outline-offset length(px) / values": {},
|
||||
"outline-offset length(px) / events": {},
|
||||
"outline-offset length(em) / values": {},
|
||||
"outline-offset length(em) / events": {},
|
||||
"outline-offset length(ex) / values": {},
|
||||
"outline-offset length(ex) / events": {},
|
||||
"outline-offset length(mm) / values": {},
|
||||
"outline-offset length(mm) / events": {},
|
||||
"outline-offset length(cm) / values": {},
|
||||
"outline-offset length(cm) / events": {},
|
||||
"outline-offset length(in) / values": {},
|
||||
"outline-offset length(in) / events": {},
|
||||
"outline-width length(pt) / values": {},
|
||||
"outline-width length(pt) / events": {},
|
||||
"outline-width length(pc) / values": {},
|
||||
"outline-width length(pc) / events": {},
|
||||
"outline-width length(px) / values": {},
|
||||
"outline-width length(px) / events": {},
|
||||
"outline-width length(em) / values": {},
|
||||
"outline-width length(em) / events": {},
|
||||
"outline-width length(ex) / values": {},
|
||||
"outline-width length(ex) / events": {},
|
||||
"outline-width length(mm) / values": {},
|
||||
"outline-width length(mm) / events": {},
|
||||
"outline-width length(cm) / values": {},
|
||||
"outline-width length(cm) / events": {},
|
||||
"outline-width length(in) / values": {},
|
||||
"outline-width length(in) / events": {},
|
||||
"clip rectangle(rectangle) / values": {},
|
||||
"clip rectangle(rectangle) / events": {},
|
||||
"crop rectangle(rectangle) / values": {},
|
||||
"crop rectangle(rectangle) / events": {},
|
||||
"vertical-align length(pt) / values": {},
|
||||
"vertical-align length(pt) / events": {},
|
||||
"vertical-align length(pc) / values": {},
|
||||
"vertical-align length(pc) / events": {},
|
||||
"vertical-align length(px) / values": {},
|
||||
"vertical-align length(px) / events": {},
|
||||
"vertical-align length(em) / values": {},
|
||||
"vertical-align length(em) / events": {},
|
||||
"vertical-align length(ex) / values": {},
|
||||
"vertical-align length(ex) / events": {},
|
||||
"vertical-align length(mm) / values": {},
|
||||
"vertical-align length(mm) / events": {},
|
||||
"vertical-align length(cm) / values": {},
|
||||
"vertical-align length(cm) / events": {},
|
||||
"vertical-align length(in) / values": {},
|
||||
"vertical-align length(in) / events": {},
|
||||
"vertical-align percentage(%) / values": {},
|
||||
"vertical-align percentage(%) / events": {},
|
||||
"opacity number[0,1](zero-to-one) / values": {},
|
||||
"opacity number[0,1](zero-to-one) / events": {},
|
||||
"visibility visibility(keyword) / values": {},
|
||||
"visibility visibility(keyword) / events": {},
|
||||
"z-index integer(integer) / values": {},
|
||||
"z-index integer(integer) / 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>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
// Note: Parent element doesn't transition, so above quote doesn't apply!
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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) {
|
||||
// clone and overwrite initial styles to be
|
||||
// applied to #transition
|
||||
var inherited = extend({}, data.from);
|
||||
inherited[data.property] = 'inherit';
|
||||
|
||||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
// all styles including transition apply to to #container so they
|
||||
// can inherit down to #transition
|
||||
'.container': extend({}, data.parentStyle, data.from),
|
||||
'.container.to': data.to,
|
||||
'.container.how': {},
|
||||
// #transition only inherits and listens for transition events
|
||||
'.transition': inherited,
|
||||
'.transition.to' : {},
|
||||
'.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning implicitly inherited property values</title>
|
||||
<meta content="Test checks that implicitly inherited property values that are transitioned on a parent element don't start a transition" name="assert">
|
||||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<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">/*
|
||||
{
|
||||
"background-position length-em(em) / values": {},
|
||||
"background-position length-em(em) / events": {},
|
||||
"border-top-width length-em(em) / values": {},
|
||||
"border-top-width length-em(em) / events": {},
|
||||
"border-right-width length-em(em) / values": {},
|
||||
"border-right-width length-em(em) / events": {},
|
||||
"border-bottom-width length-em(em) / values": {},
|
||||
"border-bottom-width length-em(em) / events": {},
|
||||
"border-left-width length-em(em) / values": {},
|
||||
"border-left-width length-em(em) / events": {},
|
||||
"padding-bottom length-em(em) / values": {},
|
||||
"padding-bottom length-em(em) / events": {},
|
||||
"padding-left length-em(em) / values": {},
|
||||
"padding-left length-em(em) / events": {},
|
||||
"padding-right length-em(em) / values": {},
|
||||
"padding-right length-em(em) / events": {},
|
||||
"padding-top length-em(em) / values": {},
|
||||
"padding-top length-em(em) / events": {},
|
||||
"margin-bottom length-em(em) / values": {},
|
||||
"margin-bottom length-em(em) / events": {},
|
||||
"margin-left length-em(em) / values": {},
|
||||
"margin-left length-em(em) / events": {},
|
||||
"margin-right length-em(em) / values": {},
|
||||
"margin-right length-em(em) / events": {},
|
||||
"margin-top length-em(em) / values": {},
|
||||
"margin-top length-em(em) / events": {},
|
||||
"height length-em(em) / values": {},
|
||||
"height length-em(em) / events": {},
|
||||
"width length-em(em) / values": {},
|
||||
"width length-em(em) / events": {},
|
||||
"min-height length-em(em) / values": {},
|
||||
"min-height length-em(em) / events": {},
|
||||
"min-width length-em(em) / values": {},
|
||||
"min-width length-em(em) / events": {},
|
||||
"max-height length-em(em) / values": {},
|
||||
"max-height length-em(em) / events": {},
|
||||
"max-width length-em(em) / values": {},
|
||||
"max-width length-em(em) / events": {},
|
||||
"top length-em(em) / values": {},
|
||||
"top length-em(em) / events": {},
|
||||
"right length-em(em) / values": {},
|
||||
"right length-em(em) / events": {},
|
||||
"bottom length-em(em) / values": {},
|
||||
"bottom length-em(em) / events": {},
|
||||
"left length-em(em) / values": {},
|
||||
"left length-em(em) / events": {},
|
||||
"line-height length-em(em) / values": {},
|
||||
"line-height length-em(em) / events": {},
|
||||
"letter-spacing length-em(em) / values": {},
|
||||
"letter-spacing length-em(em) / events": {},
|
||||
"word-spacing length-em(em) / values": {},
|
||||
"word-spacing length-em(em) / events": {},
|
||||
"text-indent length-em(em) / values": {},
|
||||
"text-indent length-em(em) / events": {},
|
||||
"outline-offset length-em(em) / values": {},
|
||||
"outline-offset length-em(em) / events": {},
|
||||
"outline-width length-em(em) / values": {},
|
||||
"outline-width length-em(em) / events": {},
|
||||
"vertical-align length-em(em) / values": {},
|
||||
"vertical-align length-em(em) / 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>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
// Note: "indirectly" could mean "font-size" on parent, "em-based" on element
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
var tests = getFontSizeRelativePropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
// or filter using one of:
|
||||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
// 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) {
|
||||
// have parent transition the font-size only
|
||||
var from = extend({}, data.from, {'font-size': '20px'});
|
||||
delete from[data.property];
|
||||
|
||||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
|
||||
'.container': from,
|
||||
'.container.to': {'font-size': '30px'},
|
||||
// transition font-size on parent
|
||||
'.container.how': {transition: 'font-size ' + duration + ' linear 0s'},
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : {},
|
||||
// transition font-size dependent property on child
|
||||
'.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
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 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.transition.from, data.transition.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.transition.computedStyle(data.property);
|
||||
assert_not_equals(current, data.transition.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, 'transition'));
|
||||
}
|
||||
},
|
||||
// test TransitionEnd events
|
||||
'events': {
|
||||
done: function(test, data, options) {
|
||||
// make sure there were no events on parent
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "font-size:" + duration));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
|
||||
}
|
||||
}
|
||||
},
|
||||
// called once all tests are done
|
||||
done: generalParallelTest.done
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html><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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,229 @@
|
|||
(function(root) {
|
||||
'use strict';
|
||||
//
|
||||
var index = 0;
|
||||
var suite = root.generalParallelTest = {
|
||||
// prepare individual test
|
||||
setup: function(data, options) {
|
||||
suite._setupDom(data, options);
|
||||
suite._setupEvents(data, options);
|
||||
},
|
||||
// clone fixture and prepare data containers
|
||||
_setupDom: function(data, options) {
|
||||
// clone fixture into off-viewport test-canvas
|
||||
data.fixture = document.getElementById('fixture').cloneNode(true);
|
||||
data.fixture.id = 'test-' + (index++);
|
||||
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
|
||||
|
||||
// data container for #fixture > .container > .transition
|
||||
data.transition = {
|
||||
node: data.fixture.querySelector('.transition'),
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container
|
||||
data.container = {
|
||||
node: data.transition.node.parentNode,
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.container.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container > .transition[:before | :after]
|
||||
if (data.pseudo) {
|
||||
data.pseudo = {
|
||||
name: data.pseudo,
|
||||
values: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property, ':' + data.pseudo.name);
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// bind TransitionEnd event listeners
|
||||
_setupEvents: function(data, options) {
|
||||
['transition', 'container'].forEach(function(elem) {
|
||||
data[elem]._events = addTransitionEvent(data[elem].node, function(event) {
|
||||
event.stopPropagation();
|
||||
var name = event.propertyName;
|
||||
var time = Math.round(event.elapsedTime * 1000) / 1000;
|
||||
var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : '';
|
||||
data[elem].events.push(name + pseudo + ":" + time + "s");
|
||||
});
|
||||
});
|
||||
},
|
||||
// cleanup after individual test
|
||||
teardown: function(data, options) {
|
||||
// data.fixture.remove();
|
||||
if (data.fixture.parentNode) {
|
||||
data.fixture.parentNode.removeChild(data.fixture);
|
||||
}
|
||||
},
|
||||
// invoked prior to running a slice of tests
|
||||
sliceStart: function(options, tests) {
|
||||
// inject styles into document
|
||||
setStyle(options.styles);
|
||||
// kick off value collection loop
|
||||
generalParallelTest.startValueCollection(options);
|
||||
},
|
||||
// invoked after running a slice of tests
|
||||
sliceDone: function(options, tests) {
|
||||
// stop value collection loop
|
||||
generalParallelTest.stopValueCollection(options);
|
||||
// reset styles cache
|
||||
options.styles = {};
|
||||
},
|
||||
// called once all tests are done
|
||||
done: function(options) {
|
||||
// reset document styles
|
||||
setStyle();
|
||||
reflow();
|
||||
},
|
||||
// add styles of individual test to slice cache
|
||||
addStyles: function(data, options, styles) {
|
||||
if (!options.styles) {
|
||||
options.styles = {};
|
||||
}
|
||||
|
||||
Object.keys(styles).forEach(function(key) {
|
||||
var selector = '#' + data.fixture.id
|
||||
// fixture must become #fixture.fixture rather than a child selector
|
||||
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
|
||||
+ key;
|
||||
|
||||
options.styles[selector] = styles[key];
|
||||
});
|
||||
},
|
||||
// set style and compute values for container and transition
|
||||
getStyle: function(data) {
|
||||
reflow();
|
||||
// grab current styles: "initial state"
|
||||
suite._getStyleFor(data, 'from');
|
||||
// apply target state
|
||||
suite._addClass(data, 'to', true);
|
||||
// grab current styles: "target state"
|
||||
suite._getStyleFor(data, 'to');
|
||||
// remove target state
|
||||
suite._removeClass(data, 'to', true);
|
||||
|
||||
// clean up the mess created for value collection
|
||||
data.container._values = [];
|
||||
data.transition._values = [];
|
||||
if (data.pseudo) {
|
||||
data.pseudo._values = [];
|
||||
}
|
||||
},
|
||||
// grab current styles and store in respective element's data container
|
||||
_getStyleFor: function(data, key) {
|
||||
data.container[key] = data.container.computedStyle(data.property);
|
||||
data.transition[key] = data.transition.computedStyle(data.property);
|
||||
if (data.pseudo) {
|
||||
data.pseudo[key] = data.pseudo.computedStyle(data.property);
|
||||
}
|
||||
},
|
||||
// add class to test's elements and possibly reflow
|
||||
_addClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.add(className);
|
||||
data.transition.node.classList.add(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// remove class from test's elements and possibly reflow
|
||||
_removeClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.remove(className);
|
||||
data.transition.node.classList.remove(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// add transition and to classes to container and transition
|
||||
startTransition: function(data) {
|
||||
// add transition-defining class
|
||||
suite._addClass(data, 'how', true);
|
||||
// add target state (without reflowing)
|
||||
suite._addClass(data, 'to', false);
|
||||
},
|
||||
// requestAnimationFrame runLoop to collect computed values
|
||||
startValueCollection: function(options) {
|
||||
var raf = getRequestAnimationFrame() || function(callback){
|
||||
setTimeout(callback, 20);
|
||||
};
|
||||
|
||||
// flag denoting if the runLoop should continue (true) or exit (false)
|
||||
options._collectValues = true;
|
||||
|
||||
function runLoop() {
|
||||
if (!options._collectValues) {
|
||||
// test's are done, stop annoying the CPU
|
||||
return;
|
||||
}
|
||||
|
||||
// collect current style for test's elements
|
||||
options.tests.forEach(function(data) {
|
||||
if (!data.property) {
|
||||
return;
|
||||
}
|
||||
|
||||
['transition', 'container', 'pseudo'].forEach(function(elem) {
|
||||
var pseudo = null;
|
||||
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var current = data[elem].computedStyle(data.property);
|
||||
var values = data[elem].values;
|
||||
var length = values.length;
|
||||
if (!length || values[length - 1] !== current) {
|
||||
values.push(current);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// rinse and repeat
|
||||
raf(runLoop);
|
||||
}
|
||||
|
||||
runLoop();
|
||||
},
|
||||
// stop requestAnimationFrame runLoop collecting computed values
|
||||
stopValueCollection: function(options) {
|
||||
options._collectValues = false;
|
||||
},
|
||||
|
||||
// generate test.step function asserting collected events match expected
|
||||
assertExpectedEventsFunc: function(data, elem, expected) {
|
||||
return function() {
|
||||
var _result = data[elem].events.sort().join(" ");
|
||||
var _expected = typeof expected === 'string' ? expected : expected.sort().join(" ");
|
||||
assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem);
|
||||
};
|
||||
},
|
||||
// generate test.step function asserting collected values are neither initial nor target
|
||||
assertIntermediateValuesFunc: function(data, elem) {
|
||||
return function() {
|
||||
// the first value (index: 0) is always going to be the initial value
|
||||
// the last value is always going to be the target value
|
||||
var values = data[elem].values;
|
||||
if (data.flags.discrete) {
|
||||
// a discrete value will just switch from one state to another without having passed intermediate states.
|
||||
assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem);
|
||||
assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem);
|
||||
assert_equals(values.length, 2, "discrete property only has 2 values ." + elem);
|
||||
} else {
|
||||
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
|
||||
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
|
||||
}
|
||||
|
||||
// TODO: first value must be initial, last value must be target
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
//
|
||||
// Simple Helper Functions For Testing CSS
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
||||
// serialize styles object and dump to dom
|
||||
// appends <style id="dynamic-style"> to <head>
|
||||
// setStyle("#some-selector", {"some-style" : "value"})
|
||||
// setStyle({"#some-selector": {"some-style" : "value"}})
|
||||
root.setStyle = function(selector, styles) {
|
||||
var target = document.getElementById('dynamic-style');
|
||||
if (!target) {
|
||||
target = document.createElement('style');
|
||||
target.id = 'dynamic-style';
|
||||
target.type = "text/css";
|
||||
document.getElementsByTagName('head')[0].appendChild(target);
|
||||
}
|
||||
|
||||
var data = [];
|
||||
// single selector/styles
|
||||
if (typeof selector === 'string' && styles !== undefined) {
|
||||
data = [selector, '{', serializeStyles(styles), '}'];
|
||||
target.textContent = data.join("\n");
|
||||
return;
|
||||
}
|
||||
// map of selector/styles
|
||||
for (var key in selector) {
|
||||
if (Object.prototype.hasOwnProperty.call(selector, key)) {
|
||||
var _data = [key, '{', serializeStyles(selector[key]), '}'];
|
||||
data.push(_data.join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
target.textContent = data.join("\n");
|
||||
};
|
||||
|
||||
function serializeStyles(styles) {
|
||||
var data = [];
|
||||
for (var property in styles) {
|
||||
if (Object.prototype.hasOwnProperty.call(styles, property)) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
data.push(prefixedProperty + ":" + styles[property] + ";");
|
||||
}
|
||||
}
|
||||
|
||||
return data.join('\n');
|
||||
}
|
||||
|
||||
|
||||
// shorthand for computed style
|
||||
root.computedStyle = function(element, property, pseudo) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
return window
|
||||
.getComputedStyle(element, pseudo || null)
|
||||
.getPropertyValue(prefixedProperty);
|
||||
};
|
||||
|
||||
// flush rendering buffer
|
||||
root.reflow = function() {
|
||||
document.body.offsetWidth;
|
||||
};
|
||||
|
||||
// add all known TransitionEnd events to element
|
||||
root.addTransitionEvent = function(element, handler) {
|
||||
return addEvent(element, 'TransitionEnd webkitTransitionEnd transitionend oTransitionEnd otransitionend MSTransitionEnd', handler);
|
||||
};
|
||||
|
||||
// add space-separated list of events to element
|
||||
root.addEvent = function(element, events, handler) {
|
||||
var _events = {};
|
||||
var tokens = events.split(" ");
|
||||
for (var i = 0, token; token = tokens[i]; i++) {
|
||||
element.addEventListener(token, handler, false);
|
||||
_events[token] = handler;
|
||||
}
|
||||
return _events;
|
||||
};
|
||||
|
||||
// merge objects
|
||||
root.extend = function(target /*, ..rest */) {
|
||||
Array.prototype.slice.call(arguments, 1).forEach(function(obj) {
|
||||
Object.keys(obj).forEach(function(key) {
|
||||
target[key] = obj[key];
|
||||
});
|
||||
});
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// dom fixture helper ("resetting dom test elements")
|
||||
var _domFixture;
|
||||
var _domFixtureSelector;
|
||||
root.domFixture = function(selector) {
|
||||
var fixture = document.querySelector(selector || _domFixtureSelector);
|
||||
if (!fixture) {
|
||||
throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!');
|
||||
}
|
||||
if (!_domFixture && selector) {
|
||||
// save a copy
|
||||
_domFixture = fixture.cloneNode(true);
|
||||
_domFixtureSelector = selector;
|
||||
} else if (_domFixture) {
|
||||
// restore the copy
|
||||
var tmp = _domFixture.cloneNode(true);
|
||||
fixture.parentNode.replaceChild(tmp, fixture);
|
||||
} else {
|
||||
throw new Error('domFixture must be initialized first!');
|
||||
}
|
||||
};
|
||||
|
||||
// return requestAnimationFrame handler, if available
|
||||
root.getRequestAnimationFrame = function() {
|
||||
return window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame;
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
|
|
@ -0,0 +1,449 @@
|
|||
(function(root){
|
||||
|
||||
/*
|
||||
* General Value Types definition
|
||||
* they return an object of arrays of type { <name>: [<start-value>, <end-value>], ... }
|
||||
*/
|
||||
var values = {
|
||||
'length' : function() {
|
||||
// http://www.w3.org/TR/css3-values/#lengths
|
||||
return {
|
||||
// CSS Values and Module Level 3
|
||||
// ch: ['1ch', '10ch'],
|
||||
// rem: ['1rem', '10rem'],
|
||||
// vw: ['1vw', '10vw'],
|
||||
// vh: ['1vh', '10vh'],
|
||||
// vmin: ['1vmin', '10vmin'],
|
||||
// vmax: ['1vmax', '10vmax'],
|
||||
// CSS Values and Module Level 2
|
||||
pt: ['1pt', '10pt'],
|
||||
pc: ['1pc', '10pc'],
|
||||
px: ['1px', '10px'],
|
||||
// CSS Values and Module Level 1
|
||||
em: ['1em', '10em'],
|
||||
ex: ['1ex', '10ex'],
|
||||
mm: ['1mm', '10mm'],
|
||||
cm: ['1cm', '10cm'],
|
||||
'in': ['1in', '10in']
|
||||
};
|
||||
},
|
||||
'length-em': function() {
|
||||
return {
|
||||
em: ['1.1em', '1.5em']
|
||||
};
|
||||
},
|
||||
'percentage': function() {
|
||||
// http://www.w3.org/TR/css3-values/#percentages
|
||||
return {
|
||||
'%': ['33%', '80%']
|
||||
};
|
||||
},
|
||||
'color': function() {
|
||||
// http://www.w3.org/TR/css3-values/#colors
|
||||
// http://www.w3.org/TR/css3-color/
|
||||
return {
|
||||
rgba: ['rgba(100,100,100,1)', 'rgba(10,10,10,0.4)']
|
||||
};
|
||||
},
|
||||
'rectangle': function() {
|
||||
// http://www.w3.org/TR/CSS2/visufx.html#value-def-shape
|
||||
return {
|
||||
rectangle: ['rect(10px,10px,10px,10px)', 'rect(15px,15px,5px,5px)']
|
||||
};
|
||||
},
|
||||
'font-weight': function() {
|
||||
// http://www.w3.org/TR/css3-fonts/#font-weight-prop
|
||||
return {
|
||||
keyword: ["normal", "bold"],
|
||||
numeric: ["100", "900"]
|
||||
};
|
||||
},
|
||||
'number': function() {
|
||||
// http://www.w3.org/TR/css3-values/#number
|
||||
return {
|
||||
integer: ["1", "10"],
|
||||
decimal: ["1.1", "9.55"]
|
||||
};
|
||||
},
|
||||
'number[0,1]': function() {
|
||||
// http://www.w3.org/TR/css3-values/#number
|
||||
// applies to [0,1]-ranged properties like opacity
|
||||
return {
|
||||
"zero-to-one": ["0.2", "0.9"]
|
||||
};
|
||||
},
|
||||
'integer': function() {
|
||||
// http://www.w3.org/TR/css3-values/#integer
|
||||
return {
|
||||
integer: ["1", "10"]
|
||||
};
|
||||
},
|
||||
'shadow': function() {
|
||||
// http://www.w3.org/TR/css-text-decor-3/#text-shadow-property
|
||||
return {
|
||||
shadow: ['rgba(0,0,0,0.1) 5px 6px 7px', 'rgba(10,10,10,0.9) 5px 6px 7px']
|
||||
};
|
||||
},
|
||||
'visibility': function() {
|
||||
// http://www.w3.org/TR/CSS2/visufx.html#visibility
|
||||
return {
|
||||
keyword: ['visible', 'hidden', {discrete: true}]
|
||||
};
|
||||
},
|
||||
'auto': function(property) {
|
||||
var types = properties[property] || unspecified_properties[property];
|
||||
var val = values[types[0]](property);
|
||||
var key = Object.keys(val).shift();
|
||||
return {
|
||||
to: [val[key][1], 'auto'],
|
||||
from: ['auto', val[key][1]]
|
||||
};
|
||||
},
|
||||
// types reqired for non-specified properties
|
||||
'border-radius': function() {
|
||||
return {
|
||||
px: ['1px', '10px'],
|
||||
"px-px": ['1px 3px', '10px 13px']
|
||||
};
|
||||
},
|
||||
'image' : function() {
|
||||
var prefix = getValueVendorPrefix('background-image', 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)');
|
||||
return {
|
||||
// Chrome implements this
|
||||
url: ['url(support/one.gif)', 'url(support/two.gif)'],
|
||||
data: ['url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)'],
|
||||
// A hunch, as from the spec:
|
||||
// http://www.w3.org/TR/css3-transitions/#animatable-types
|
||||
// gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
|
||||
gradient: [prefix + 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)', prefix + 'linear-gradient(top, #bada55, hsl(0, 80%, 70%))']
|
||||
};
|
||||
},
|
||||
'background-size': function() {
|
||||
return {
|
||||
keyword: ['cover', 'contain']
|
||||
};
|
||||
},
|
||||
'box-shadow': function() {
|
||||
// http://www.w3.org/TR/css3-background/#ltshadowgt
|
||||
return {
|
||||
shadow: ['60px -16px teal', '60px -16px red']
|
||||
};
|
||||
},
|
||||
'vertical': function() {
|
||||
return {
|
||||
keyword: ['top', 'bottom']
|
||||
};
|
||||
},
|
||||
'horizontal': function() {
|
||||
return {
|
||||
keyword: ['left', 'right']
|
||||
};
|
||||
},
|
||||
'font-stretch': function() {
|
||||
return {
|
||||
keyword: ['condensed', 'expanded']
|
||||
};
|
||||
},
|
||||
'transform': function() {
|
||||
return {
|
||||
rotate: ['rotate(10deg)', 'rotate(20deg)']
|
||||
};
|
||||
},
|
||||
'position': function() {
|
||||
return {
|
||||
'static to absolute': ['static', 'absolute', {discrete: true}],
|
||||
'relative to absolute': ['relative', 'absolute', {discrete: true}],
|
||||
'absolute to fixed': ['absolute', 'fixed', {discrete: true}]
|
||||
};
|
||||
},
|
||||
'display': function() {
|
||||
return {
|
||||
'static to absolute': ['none', 'block', {discrete: true}],
|
||||
'block to inline-block': ['block', 'inline-block', {discrete: true}]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Property to Type table
|
||||
* (as stated in specification)
|
||||
*/
|
||||
var properties = {
|
||||
'background-color': ['color'],
|
||||
'background-position': ['length', 'percentage'],
|
||||
|
||||
'border-top-width': ['length'],
|
||||
'border-right-width': ['length'],
|
||||
'border-bottom-width': ['length'],
|
||||
'border-left-width': ['length'],
|
||||
|
||||
'border-top-color': ['color'],
|
||||
'border-right-color': ['color'],
|
||||
'border-bottom-color': ['color'],
|
||||
'border-left-color': ['color'],
|
||||
|
||||
'padding-bottom': ['length'],
|
||||
'padding-left': ['length'],
|
||||
'padding-right': ['length'],
|
||||
'padding-top': ['length'],
|
||||
|
||||
'margin-bottom': ['length'],
|
||||
'margin-left': ['length'],
|
||||
'margin-right': ['length'],
|
||||
'margin-top': ['length'],
|
||||
|
||||
'height': ['length', 'percentage'],
|
||||
'width': ['length', 'percentage'],
|
||||
'min-height': ['length', 'percentage'],
|
||||
'min-width': ['length', 'percentage'],
|
||||
'max-height': ['length', 'percentage'],
|
||||
'max-width': ['length', 'percentage'],
|
||||
|
||||
'top': ['length', 'percentage'],
|
||||
'right': ['length', 'percentage'],
|
||||
'bottom': ['length', 'percentage'],
|
||||
'left': ['length', 'percentage'],
|
||||
|
||||
'color': ['color'],
|
||||
'font-size': ['length', 'percentage'],
|
||||
'font-weight': ['font-weight'],
|
||||
'line-height': ['number', 'length', 'percentage'],
|
||||
'letter-spacing': ['length'],
|
||||
// Note: percentage is Level3 and not implemented anywhere yet
|
||||
// http://dev.w3.org/csswg/css3-text/#word-spacing
|
||||
'word-spacing': ['length', 'percentage'],
|
||||
'text-indent': ['length', 'percentage'],
|
||||
'text-shadow': ['shadow'],
|
||||
|
||||
'outline-color': ['color'],
|
||||
// outline-offset <integer> used to be an error in the spec
|
||||
'outline-offset': ['length'],
|
||||
'outline-width': ['length'],
|
||||
|
||||
'clip': ['rectangle'],
|
||||
// Note: doesn't seem implemented anywhere
|
||||
'crop': ['rectangle'],
|
||||
|
||||
'vertical-align': ['length', 'percentage'],
|
||||
'opacity': ['number[0,1]'],
|
||||
'visibility': ['visibility'],
|
||||
'z-index': ['integer']
|
||||
};
|
||||
|
||||
/*
|
||||
* Property to auto-value mapping
|
||||
* (lazily taken from http://www.siliconbaytraining.com/pages/csspv.html)
|
||||
*/
|
||||
var properties_auto = [
|
||||
'margin-top',
|
||||
'margin-right',
|
||||
'margin-bottom',
|
||||
'margin-left',
|
||||
'height',
|
||||
'width',
|
||||
'clip',
|
||||
'marker-offset',
|
||||
'top',
|
||||
'right',
|
||||
'left',
|
||||
'bottom',
|
||||
'z-index'
|
||||
];
|
||||
|
||||
/*
|
||||
* Property to Type table
|
||||
* (missing value-types of specified properties)
|
||||
*/
|
||||
var missing_properties = {
|
||||
'margin-bottom': ['percentage'],
|
||||
'margin-left': ['percentage'],
|
||||
'margin-right': ['percentage'],
|
||||
'margin-top': ['percentage'],
|
||||
'padding-bottom': ['percentage'],
|
||||
'padding-left': ['percentage'],
|
||||
'padding-right': ['percentage'],
|
||||
'padding-top': ['percentage'],
|
||||
'vertical-align': ['vertical']
|
||||
};
|
||||
|
||||
/*
|
||||
* Property to Type table
|
||||
* (properties that haven't been specified but implemented)
|
||||
*/
|
||||
var unspecified_properties = {
|
||||
// http://oli.jp/2010/css-animatable-properties/
|
||||
'border-top-left-radius': ['border-radius'],
|
||||
'border-top-right-radius': ['border-radius'],
|
||||
'border-bottom-left-radius': ['border-radius'],
|
||||
'border-bottom-right-radius': ['border-radius'],
|
||||
'background-image': ['image'],
|
||||
'background-size': ['background-size'],
|
||||
// http://dev.w3.org/csswg/css3-background/#the-box-shadow
|
||||
// Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.)
|
||||
'box-shadow': ['box-shadow'],
|
||||
'font-size-adjust': ['number'],
|
||||
'font-stretch': ['font-stretch'],
|
||||
'marker-offset': ['length'],
|
||||
'text-decoration-color': ['color'],
|
||||
'column-count': ['integer'],
|
||||
'column-gap': ['length'],
|
||||
'column-rule-color': ['color'],
|
||||
'column-rule-width': ['length'],
|
||||
'column-width': ['length'],
|
||||
'transform': ['transform'],
|
||||
'transform-origin': ['horizontal'],
|
||||
'zoom': ['number'],
|
||||
'outline-radius-topleft': ['length', 'percentage'],
|
||||
'outline-radius-topright': ['length', 'percentage'],
|
||||
'outline-radius-bottomright': ['length', 'percentage'],
|
||||
'outline-radius-bottomleft': ['length', 'percentage'],
|
||||
'display': ['display'],
|
||||
'position': ['position']
|
||||
};
|
||||
|
||||
/*
|
||||
* additional styles required to actually render
|
||||
* (different browsers expect different environment)
|
||||
*/
|
||||
var additional_styles = {
|
||||
// all browsers
|
||||
'border-top-width': {'border-top-style' : 'solid'},
|
||||
'border-right-width': {'border-right-style' : 'solid'},
|
||||
'border-bottom-width': {'border-bottom-style' : 'solid'},
|
||||
'border-left-width': {'border-left-style' : 'solid'},
|
||||
'top': {'position': 'absolute'},
|
||||
'right': {'position': 'absolute'},
|
||||
'bottom': {'position': 'absolute'},
|
||||
'left': {'position': 'absolute'},
|
||||
'z-index': {'position': 'absolute'},
|
||||
'outline-offset': {'outline-style': 'solid'},
|
||||
'outline-width': {'outline-style': 'solid'},
|
||||
'word-spacing': {'width': '100px', 'height': '100px'},
|
||||
// unspecified properties
|
||||
'column-rule-width': {'column-rule-style': 'solid'},
|
||||
'position': {'width': '50px', 'height': '50px', top: '10px', left: '50px'}
|
||||
};
|
||||
|
||||
/*
|
||||
* additional styles required *on the parent* to actually render
|
||||
* (different browsers expect different environment)
|
||||
*/
|
||||
var parent_styles = {
|
||||
'border-top-width': {'border-top-style' : 'solid'},
|
||||
'border-right-width': {'border-right-style' : 'solid'},
|
||||
'border-bottom-width': {'border-bottom-style' : 'solid'},
|
||||
'border-left-width': {'border-left-style' : 'solid'},
|
||||
'height': {'width': '100px', 'height': '100px'},
|
||||
'min-height': {'width': '100px', 'height': '100px'},
|
||||
'max-height': {'width': '100px', 'height': '100px'},
|
||||
'width': {'width': '100px', 'height': '100px'},
|
||||
'min-width': {'width': '100px', 'height': '100px'},
|
||||
'max-width': {'width': '100px', 'height': '100px'},
|
||||
// unspecified properties
|
||||
'position': {'position': 'relative', 'width': '100px', 'height': '100px'},
|
||||
// inheritance tests
|
||||
'top': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'right': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'bottom': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'left': {'width': '100px', 'height': '100px', 'position': 'relative'}
|
||||
};
|
||||
|
||||
|
||||
function assemble(props) {
|
||||
var tests = [];
|
||||
|
||||
// assemble tests
|
||||
for (var property in props) {
|
||||
props[property].forEach(function(type) {
|
||||
var _values = values[type](property);
|
||||
Object.keys(_values).forEach(function(unit) {
|
||||
var data = {
|
||||
name: property + ' ' + type + '(' + unit + ')',
|
||||
property: property,
|
||||
valueType : type,
|
||||
unit : unit,
|
||||
parentStyle: extend({}, parent_styles[property] || {}),
|
||||
from: extend({}, additional_styles[property] || {}),
|
||||
to: {}
|
||||
};
|
||||
|
||||
data.from[property] = _values[unit][0];
|
||||
data.to[property] = _values[unit][1];
|
||||
data.flags = _values[unit][2] || {};
|
||||
|
||||
tests.push(data);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return tests;
|
||||
}
|
||||
|
||||
root.getPropertyTests = function() {
|
||||
return assemble(properties);
|
||||
};
|
||||
|
||||
root.getMissingPropertyTests = function() {
|
||||
return assemble(missing_properties);
|
||||
};
|
||||
|
||||
root.getUnspecifiedPropertyTests = function() {
|
||||
return assemble(unspecified_properties);
|
||||
};
|
||||
|
||||
root.getFontSizeRelativePropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
for (var key in properties) {
|
||||
if (!Object.prototype.hasOwnProperty.call(properties, key) || key === "font-size") {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (properties[key].indexOf('length') > -1) {
|
||||
accepted[key] = ['length-em'];
|
||||
}
|
||||
}
|
||||
|
||||
return assemble(accepted);
|
||||
};
|
||||
|
||||
root.getAutoPropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
for (var i = 0, key; key = properties_auto[i]; i++) {
|
||||
accepted[key] = ['auto'];
|
||||
}
|
||||
|
||||
return assemble(accepted);
|
||||
};
|
||||
|
||||
root.filterPropertyTests = function(tests, names) {
|
||||
var allowed = {};
|
||||
var accepted = [];
|
||||
|
||||
if (typeof names === "string") {
|
||||
names = [names];
|
||||
}
|
||||
|
||||
if (!(names instanceof RegExp)) {
|
||||
names.forEach(function(name) {
|
||||
allowed[name] = true;
|
||||
});
|
||||
}
|
||||
|
||||
tests.forEach(function(test) {
|
||||
if (names instanceof RegExp) {
|
||||
if (!test.name.match(names)) {
|
||||
return;
|
||||
}
|
||||
} else if (!allowed[test.name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
accepted.push(test);
|
||||
});
|
||||
|
||||
return accepted;
|
||||
};
|
||||
|
||||
})(window);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
|
|
@ -0,0 +1,145 @@
|
|||
(function(root){
|
||||
'use strict';
|
||||
// testharness doesn't know about async test queues,
|
||||
// so this wrapper takes care of that
|
||||
|
||||
/* USAGE:
|
||||
runParallelAsyncHarness({
|
||||
// list of data to test, must be array of objects.
|
||||
// each object must contain a "name" property to describe the test
|
||||
// besides name, the object can contain whatever data you need
|
||||
tests: [
|
||||
{name: "name of test 1", custom: "data"},
|
||||
{name: "name of test 2", custom: "data"},
|
||||
// ...
|
||||
],
|
||||
|
||||
// number of tests (tests, not test-cases!) to run concurrently
|
||||
testsPerSlice: 100,
|
||||
|
||||
// time in milliseconds a test-run takes
|
||||
duration: 1000,
|
||||
|
||||
// test-cases to run for for the test - there must be at least one
|
||||
// each case creates its separate async_test() instance
|
||||
cases: {
|
||||
// test case named "test1"
|
||||
test1: {
|
||||
// run as a async_test.step() this callback contains your primary assertions
|
||||
start: function(testCaseKey, data, options){},
|
||||
// run as a async_test.step() this callback contains assertions to be run
|
||||
// when the test ended, immediately before teardown
|
||||
done: function(testCaseKey, data, options){}
|
||||
},
|
||||
// ...
|
||||
}
|
||||
|
||||
// all callbacks are optional:
|
||||
|
||||
// invoked for individual test before it starts so you can setup the environment
|
||||
// like DOM, CSS, adding event listeners and such
|
||||
setup: function(data, options){},
|
||||
|
||||
// invoked after a test ended, so you can clean up the environment
|
||||
// like DOM, CSS, removing event listeners and such
|
||||
teardown: function(data, options){},
|
||||
|
||||
// invoked before a batch of tests ("slice") are run concurrently
|
||||
// tests is an array of test data objects
|
||||
sliceStart: function(options, tests)
|
||||
|
||||
// invoked after a batch of tests ("slice") were run concurrently
|
||||
// tests is an array of test data objects
|
||||
sliceDone: function(options, tests)
|
||||
|
||||
// invoked once all tests are done
|
||||
done: function(options){}
|
||||
})
|
||||
*/
|
||||
root.runParallelAsyncHarness = function(options) {
|
||||
if (!options.cases) {
|
||||
throw new Error("Options don't contain test cases!");
|
||||
}
|
||||
|
||||
var noop = function(){};
|
||||
|
||||
// add a 100ms buffer to the test timeout, just in case
|
||||
var duration = Math.ceil(options.duration + 100);
|
||||
|
||||
// names of individual tests
|
||||
var cases = Object.keys(options.cases);
|
||||
|
||||
// run tests in a batch of slices
|
||||
// primarily not to overload weak devices (tablets, phones, …)
|
||||
// with too many tests running simultaneously
|
||||
var iteration = -1;
|
||||
var testPerSlice = options.testsPerSlice || 100;
|
||||
var slices = Math.ceil(options.tests.length / testPerSlice);
|
||||
|
||||
// initialize all async test cases
|
||||
// Note: satisfying testharness.js needs to know all async tests before load-event
|
||||
options.tests.forEach(function(data, index) {
|
||||
data.cases = {};
|
||||
cases.forEach(function(name) {
|
||||
data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000});
|
||||
});
|
||||
});
|
||||
|
||||
function runLoop() {
|
||||
iteration++;
|
||||
if (iteration >= slices) {
|
||||
// no more slice, we're done
|
||||
(options.done || noop)(options);
|
||||
return;
|
||||
}
|
||||
|
||||
// grab a slice of testss and initialize them
|
||||
var offset = iteration * testPerSlice;
|
||||
var tests = options.tests.slice(offset, offset + testPerSlice);
|
||||
tests.forEach(function(data) {
|
||||
(options.setup || noop)(data, options);
|
||||
|
||||
});
|
||||
|
||||
// kick off the current slice of tests
|
||||
(options.sliceStart || noop)(options, tests);
|
||||
|
||||
// perform individual "start" test-case
|
||||
tests.forEach(function(data) {
|
||||
cases.forEach(function(name) {
|
||||
data.cases[name].step(function() {
|
||||
(options.cases[name].start || noop)(data.cases[name], data, options);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// conclude test (possibly abort)
|
||||
setTimeout(function() {
|
||||
tests.forEach(function(data) {
|
||||
// perform individual "done" test-case
|
||||
cases.forEach(function(name) {
|
||||
data.cases[name].step(function() {
|
||||
(options.cases[name].done || noop)(data.cases[name], data, options);
|
||||
});
|
||||
});
|
||||
// clean up after individual test
|
||||
(options.teardown || noop)(data, options);
|
||||
// tell harness we're done with individual test-cases
|
||||
cases.forEach(function(name) {
|
||||
data.cases[name].done();
|
||||
});
|
||||
});
|
||||
|
||||
// finish the test for current slice of tests
|
||||
(options.sliceDone || noop)(options, tests);
|
||||
|
||||
// next test please, give the browser 50ms to do catch its breath
|
||||
setTimeout(runLoop, 50);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// allow DOMContentLoaded before actually doing something
|
||||
setTimeout(runLoop, 100);
|
||||
};
|
||||
|
||||
})(window);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
|
|
@ -0,0 +1,86 @@
|
|||
//
|
||||
// Vendor-Prefix Helper Functions For Testing CSS
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
||||
var prefixCache = {};
|
||||
|
||||
// convert "foo-bar" to "fooBar"
|
||||
function camelCase(str) {
|
||||
return str.replace(/\-(\w)/g, function(match, letter){
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
}
|
||||
|
||||
// vendor-prefix a css property
|
||||
root.addVendorPrefix = function (name) {
|
||||
var prefix = getVendorPrefix(name);
|
||||
if (prefix === false) {
|
||||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
return prefix + name;
|
||||
};
|
||||
|
||||
// vendor-prefix a css property value
|
||||
root.addValueVendorPrefix = function (property, value) {
|
||||
var prefix = getValueVendorPrefix(property, value);
|
||||
if (prefix === false) {
|
||||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
return prefix + value;
|
||||
};
|
||||
|
||||
// identify vendor-prefix for css property
|
||||
root.getVendorPrefix = function(name) {
|
||||
if (prefixCache[name] !== undefined) {
|
||||
return prefixCache[name];
|
||||
}
|
||||
|
||||
var elem = document.createElement("div");
|
||||
name = camelCase(name);
|
||||
|
||||
if (name in elem.style) {
|
||||
return prefixCache[name] = "";
|
||||
}
|
||||
|
||||
var prefixes = ["Webkit", "Moz", "O", "ms"];
|
||||
var styles = ["-webkit-", "-moz-", "-o-", "-ms-"];
|
||||
var _name = name.substring(0, 1).toUpperCase() + name.substring(1);
|
||||
|
||||
for (var i = 0, length = prefixes.length; i < length; i++) {
|
||||
if (prefixes[i] + _name in elem.style) {
|
||||
return prefixCache[name] = styles[i];
|
||||
}
|
||||
}
|
||||
|
||||
return prefixCache[name] = name in elem.style ? "" : false;
|
||||
};
|
||||
|
||||
// identify vendor-prefix for css property value
|
||||
root.getValueVendorPrefix = function(property, value) {
|
||||
var elem = document.createElement("div");
|
||||
// note: webkit needs the element to be attached to the dom
|
||||
document.body.appendChild(elem);
|
||||
var styles = ["-webkit-", "-moz-", "-o-", "-ms-", ""];
|
||||
var _property = getVendorPrefix(property) + property;
|
||||
for (var i=0, length = styles.length; i < length; i++) {
|
||||
var _value = styles[i] + value;
|
||||
elem.setAttribute('style', _property + ": " + _value);
|
||||
var _computed = computedStyle(elem, _property);
|
||||
if (_computed && _computed !== 'none') {
|
||||
document.body.removeChild(elem);
|
||||
return styles[i];
|
||||
}
|
||||
}
|
||||
document.body.removeChild(elem);
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Transition Reference File</title>
|
||||
<link href="mailto:oleg@the-incredible.me" rel="author" title="Oleg Janeiko">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
|
||||
transition-property: width;
|
||||
transition-duration: 0;
|
||||
}
|
||||
.box.transition {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<script charset="utf-8" type="text/javascript">
|
||||
function ready(){
|
||||
var box = document.querySelector('.box');
|
||||
box.className = 'box transition';
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="ready();">
|
||||
<div>
|
||||
<p>You should not see a red background during the transition. Note: if the test passes transition is instant.</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transitions Module Level 1 CR Test Suite Reftest Index</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Transitions Module Level 1 CR Test Suite Reftest Index</h1>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="ref-column">
|
||||
<col id="flags-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th>Reference</th>
|
||||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transition-test" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="invalid values cause all properites to animate.">
|
||||
<a href="transition-test.htm">transition-test</a></td>
|
||||
<td><a href="reference/transition-test-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
transition-test.htm == reference/transition-test-ref.htm
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
BIN
tests/wpt/css-tests/css-transitions-1_dev/html/support/cat.png
Normal file
BIN
tests/wpt/css-tests/css-transitions-1_dev/html/support/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,229 @@
|
|||
(function(root) {
|
||||
'use strict';
|
||||
//
|
||||
var index = 0;
|
||||
var suite = root.generalParallelTest = {
|
||||
// prepare individual test
|
||||
setup: function(data, options) {
|
||||
suite._setupDom(data, options);
|
||||
suite._setupEvents(data, options);
|
||||
},
|
||||
// clone fixture and prepare data containers
|
||||
_setupDom: function(data, options) {
|
||||
// clone fixture into off-viewport test-canvas
|
||||
data.fixture = document.getElementById('fixture').cloneNode(true);
|
||||
data.fixture.id = 'test-' + (index++);
|
||||
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
|
||||
|
||||
// data container for #fixture > .container > .transition
|
||||
data.transition = {
|
||||
node: data.fixture.querySelector('.transition'),
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container
|
||||
data.container = {
|
||||
node: data.transition.node.parentNode,
|
||||
values: [],
|
||||
events: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.container.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
// data container for #fixture > .container > .transition[:before | :after]
|
||||
if (data.pseudo) {
|
||||
data.pseudo = {
|
||||
name: data.pseudo,
|
||||
values: [],
|
||||
computedStyle: function(property) {
|
||||
return computedStyle(data.transition.node, property, ':' + data.pseudo.name);
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// bind TransitionEnd event listeners
|
||||
_setupEvents: function(data, options) {
|
||||
['transition', 'container'].forEach(function(elem) {
|
||||
data[elem]._events = addTransitionEvent(data[elem].node, function(event) {
|
||||
event.stopPropagation();
|
||||
var name = event.propertyName;
|
||||
var time = Math.round(event.elapsedTime * 1000) / 1000;
|
||||
var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : '';
|
||||
data[elem].events.push(name + pseudo + ":" + time + "s");
|
||||
});
|
||||
});
|
||||
},
|
||||
// cleanup after individual test
|
||||
teardown: function(data, options) {
|
||||
// data.fixture.remove();
|
||||
if (data.fixture.parentNode) {
|
||||
data.fixture.parentNode.removeChild(data.fixture);
|
||||
}
|
||||
},
|
||||
// invoked prior to running a slice of tests
|
||||
sliceStart: function(options, tests) {
|
||||
// inject styles into document
|
||||
setStyle(options.styles);
|
||||
// kick off value collection loop
|
||||
generalParallelTest.startValueCollection(options);
|
||||
},
|
||||
// invoked after running a slice of tests
|
||||
sliceDone: function(options, tests) {
|
||||
// stop value collection loop
|
||||
generalParallelTest.stopValueCollection(options);
|
||||
// reset styles cache
|
||||
options.styles = {};
|
||||
},
|
||||
// called once all tests are done
|
||||
done: function(options) {
|
||||
// reset document styles
|
||||
setStyle();
|
||||
reflow();
|
||||
},
|
||||
// add styles of individual test to slice cache
|
||||
addStyles: function(data, options, styles) {
|
||||
if (!options.styles) {
|
||||
options.styles = {};
|
||||
}
|
||||
|
||||
Object.keys(styles).forEach(function(key) {
|
||||
var selector = '#' + data.fixture.id
|
||||
// fixture must become #fixture.fixture rather than a child selector
|
||||
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
|
||||
+ key;
|
||||
|
||||
options.styles[selector] = styles[key];
|
||||
});
|
||||
},
|
||||
// set style and compute values for container and transition
|
||||
getStyle: function(data) {
|
||||
reflow();
|
||||
// grab current styles: "initial state"
|
||||
suite._getStyleFor(data, 'from');
|
||||
// apply target state
|
||||
suite._addClass(data, 'to', true);
|
||||
// grab current styles: "target state"
|
||||
suite._getStyleFor(data, 'to');
|
||||
// remove target state
|
||||
suite._removeClass(data, 'to', true);
|
||||
|
||||
// clean up the mess created for value collection
|
||||
data.container._values = [];
|
||||
data.transition._values = [];
|
||||
if (data.pseudo) {
|
||||
data.pseudo._values = [];
|
||||
}
|
||||
},
|
||||
// grab current styles and store in respective element's data container
|
||||
_getStyleFor: function(data, key) {
|
||||
data.container[key] = data.container.computedStyle(data.property);
|
||||
data.transition[key] = data.transition.computedStyle(data.property);
|
||||
if (data.pseudo) {
|
||||
data.pseudo[key] = data.pseudo.computedStyle(data.property);
|
||||
}
|
||||
},
|
||||
// add class to test's elements and possibly reflow
|
||||
_addClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.add(className);
|
||||
data.transition.node.classList.add(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// remove class from test's elements and possibly reflow
|
||||
_removeClass: function(data, className, forceReflow) {
|
||||
data.container.node.classList.remove(className);
|
||||
data.transition.node.classList.remove(className);
|
||||
if (forceReflow) {
|
||||
reflow();
|
||||
}
|
||||
},
|
||||
// add transition and to classes to container and transition
|
||||
startTransition: function(data) {
|
||||
// add transition-defining class
|
||||
suite._addClass(data, 'how', true);
|
||||
// add target state (without reflowing)
|
||||
suite._addClass(data, 'to', false);
|
||||
},
|
||||
// requestAnimationFrame runLoop to collect computed values
|
||||
startValueCollection: function(options) {
|
||||
var raf = getRequestAnimationFrame() || function(callback){
|
||||
setTimeout(callback, 20);
|
||||
};
|
||||
|
||||
// flag denoting if the runLoop should continue (true) or exit (false)
|
||||
options._collectValues = true;
|
||||
|
||||
function runLoop() {
|
||||
if (!options._collectValues) {
|
||||
// test's are done, stop annoying the CPU
|
||||
return;
|
||||
}
|
||||
|
||||
// collect current style for test's elements
|
||||
options.tests.forEach(function(data) {
|
||||
if (!data.property) {
|
||||
return;
|
||||
}
|
||||
|
||||
['transition', 'container', 'pseudo'].forEach(function(elem) {
|
||||
var pseudo = null;
|
||||
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var current = data[elem].computedStyle(data.property);
|
||||
var values = data[elem].values;
|
||||
var length = values.length;
|
||||
if (!length || values[length - 1] !== current) {
|
||||
values.push(current);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// rinse and repeat
|
||||
raf(runLoop);
|
||||
}
|
||||
|
||||
runLoop();
|
||||
},
|
||||
// stop requestAnimationFrame runLoop collecting computed values
|
||||
stopValueCollection: function(options) {
|
||||
options._collectValues = false;
|
||||
},
|
||||
|
||||
// generate test.step function asserting collected events match expected
|
||||
assertExpectedEventsFunc: function(data, elem, expected) {
|
||||
return function() {
|
||||
var _result = data[elem].events.sort().join(" ");
|
||||
var _expected = typeof expected === 'string' ? expected : expected.sort().join(" ");
|
||||
assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem);
|
||||
};
|
||||
},
|
||||
// generate test.step function asserting collected values are neither initial nor target
|
||||
assertIntermediateValuesFunc: function(data, elem) {
|
||||
return function() {
|
||||
// the first value (index: 0) is always going to be the initial value
|
||||
// the last value is always going to be the target value
|
||||
var values = data[elem].values;
|
||||
if (data.flags.discrete) {
|
||||
// a discrete value will just switch from one state to another without having passed intermediate states.
|
||||
assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem);
|
||||
assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem);
|
||||
assert_equals(values.length, 2, "discrete property only has 2 values ." + elem);
|
||||
} else {
|
||||
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
|
||||
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
|
||||
}
|
||||
|
||||
// TODO: first value must be initial, last value must be target
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
122
tests/wpt/css-tests/css-transitions-1_dev/html/support/helper.js
Normal file
122
tests/wpt/css-tests/css-transitions-1_dev/html/support/helper.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
//
|
||||
// Simple Helper Functions For Testing CSS
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
||||
// serialize styles object and dump to dom
|
||||
// appends <style id="dynamic-style"> to <head>
|
||||
// setStyle("#some-selector", {"some-style" : "value"})
|
||||
// setStyle({"#some-selector": {"some-style" : "value"}})
|
||||
root.setStyle = function(selector, styles) {
|
||||
var target = document.getElementById('dynamic-style');
|
||||
if (!target) {
|
||||
target = document.createElement('style');
|
||||
target.id = 'dynamic-style';
|
||||
target.type = "text/css";
|
||||
document.getElementsByTagName('head')[0].appendChild(target);
|
||||
}
|
||||
|
||||
var data = [];
|
||||
// single selector/styles
|
||||
if (typeof selector === 'string' && styles !== undefined) {
|
||||
data = [selector, '{', serializeStyles(styles), '}'];
|
||||
target.textContent = data.join("\n");
|
||||
return;
|
||||
}
|
||||
// map of selector/styles
|
||||
for (var key in selector) {
|
||||
if (Object.prototype.hasOwnProperty.call(selector, key)) {
|
||||
var _data = [key, '{', serializeStyles(selector[key]), '}'];
|
||||
data.push(_data.join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
target.textContent = data.join("\n");
|
||||
};
|
||||
|
||||
function serializeStyles(styles) {
|
||||
var data = [];
|
||||
for (var property in styles) {
|
||||
if (Object.prototype.hasOwnProperty.call(styles, property)) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
data.push(prefixedProperty + ":" + styles[property] + ";");
|
||||
}
|
||||
}
|
||||
|
||||
return data.join('\n');
|
||||
}
|
||||
|
||||
|
||||
// shorthand for computed style
|
||||
root.computedStyle = function(element, property, pseudo) {
|
||||
var prefixedProperty = addVendorPrefix(property);
|
||||
return window
|
||||
.getComputedStyle(element, pseudo || null)
|
||||
.getPropertyValue(prefixedProperty);
|
||||
};
|
||||
|
||||
// flush rendering buffer
|
||||
root.reflow = function() {
|
||||
document.body.offsetWidth;
|
||||
};
|
||||
|
||||
// add all known TransitionEnd events to element
|
||||
root.addTransitionEvent = function(element, handler) {
|
||||
return addEvent(element, 'TransitionEnd webkitTransitionEnd transitionend oTransitionEnd otransitionend MSTransitionEnd', handler);
|
||||
};
|
||||
|
||||
// add space-separated list of events to element
|
||||
root.addEvent = function(element, events, handler) {
|
||||
var _events = {};
|
||||
var tokens = events.split(" ");
|
||||
for (var i = 0, token; token = tokens[i]; i++) {
|
||||
element.addEventListener(token, handler, false);
|
||||
_events[token] = handler;
|
||||
}
|
||||
return _events;
|
||||
};
|
||||
|
||||
// merge objects
|
||||
root.extend = function(target /*, ..rest */) {
|
||||
Array.prototype.slice.call(arguments, 1).forEach(function(obj) {
|
||||
Object.keys(obj).forEach(function(key) {
|
||||
target[key] = obj[key];
|
||||
});
|
||||
});
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// dom fixture helper ("resetting dom test elements")
|
||||
var _domFixture;
|
||||
var _domFixtureSelector;
|
||||
root.domFixture = function(selector) {
|
||||
var fixture = document.querySelector(selector || _domFixtureSelector);
|
||||
if (!fixture) {
|
||||
throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!');
|
||||
}
|
||||
if (!_domFixture && selector) {
|
||||
// save a copy
|
||||
_domFixture = fixture.cloneNode(true);
|
||||
_domFixtureSelector = selector;
|
||||
} else if (_domFixture) {
|
||||
// restore the copy
|
||||
var tmp = _domFixture.cloneNode(true);
|
||||
fixture.parentNode.replaceChild(tmp, fixture);
|
||||
} else {
|
||||
throw new Error('domFixture must be initialized first!');
|
||||
}
|
||||
};
|
||||
|
||||
// return requestAnimationFrame handler, if available
|
||||
root.getRequestAnimationFrame = function() {
|
||||
return window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame;
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue