mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
1
tests/wpt/web-platform-tests/css/css-transitions/OWNERS
Normal file
1
tests/wpt/web-platform-tests/css/css-transitions/OWNERS
Normal file
|
|
@ -0,0 +1 @@
|
|||
@dbaron
|
||||
76
tests/wpt/web-platform-tests/css/css-transitions/README.md
Normal file
76
tests/wpt/web-platform-tests/css/css-transitions/README.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
# CSSWG Compatible Tests #
|
||||
|
||||
## Hints ##
|
||||
|
||||
* en/disable vendor-prefixing in `./support/helper.js` see `addVendorPrefixes`
|
||||
* remove extra `<length>` values to reduce test cases (and thus execution duration) in `./support.properties.js`, see `values.length`
|
||||
|
||||
|
||||
## General Properties Test Concept ##
|
||||
|
||||
Using `support/property.js` test suites compile a list of animatable properties. `getPropertyTests()` (and the like) will expand the specification's `width: length, percentage` to `width: 1em, 1ex, 1px, … 1%` in order to test all possible value types. The propertyTests returned by `support/property.js` have the following general structure:
|
||||
|
||||
```javascript
|
||||
{
|
||||
// name of the test
|
||||
"name": "background-color color(rgba)",
|
||||
// property that is being tested
|
||||
"property": "background-color",
|
||||
// styles to set on the parent container (usually #container)
|
||||
"parentStyle": {},
|
||||
// initial styles to set on the transition element (usually #transition)
|
||||
// may contain additional properties such as position: absolute; as required
|
||||
"from": {
|
||||
"background-color": "rgba(100,100,100,1)"
|
||||
},
|
||||
// styles to transition to
|
||||
"to": {
|
||||
"background-color": "rgba(10,10,10,0.4)"
|
||||
},
|
||||
// flags classifying property types,
|
||||
// currently only {discrete:true} for visbility
|
||||
"flags": {}
|
||||
}
|
||||
```
|
||||
|
||||
For each compiled test case the test runner identifies computed initial and target values. If they match, no transition will take place, because the property couldn't be parsed. If after starting the transition the computed style matches the target value, the browser applied that value immedately and no transition will take place. During the transition the computed style may match neither initial nor target value (unless it's a discrete transition), or there was no transition.
|
||||
|
||||
Besides value-assertions, the suites compare received TransitionEnd events. While the values are only matched against computed initial and target values, expected TransitionEnd events are declared explicitly. This can (and will) lead to some test failures that are arguably not a failure (mainly because the specification didn't cover the specific case). Transitioning `color` *may* (or not, depending on browser) also run a transition for `background-color`, as the latter's default value is `currentColor`. This suite considers those implicit transitions a failure. If it truly is a failure or not, should be decided in the specification (and tests updated accordingly).
|
||||
|
||||
Browsers supporting requestAnimationFrame can run a test in 100ms. Browsers that don't need a wider time frame to allow the not very dead-on-target setTimeout() to be triggered between TransitionStart and TransitionEnd. Low-end CPU devices also benefit from slower transitions. Since a 300 hundred tests, each lasting 500ms would require 2.5 minutes to run, tests are run concurrently, as they cannot affect each other. For low-end devices (e.g. iPad) too many parallel tests lead to global failure, because a single `requestAnimationFrame()` would have to iterate too many nodes, which is why the suite shards into slices of 50 parallel tests. Tests are run in an off-viewport container, to prevent you from having seizures.
|
||||
|
||||
To make individual tests a bit more readable, a lot of the test-functionality has been moved to external JavaScript files. All assertions reside within the test file itsel, though. Although they are mostly exact duplicates of other tests, it should help understanding what a test does (while abstracting away *how* it does it.)
|
||||
|
||||
### Debugging ###
|
||||
|
||||
1. reduce to the tests you want to take a closer look at - see `filterPropertyTests()` in `support/properties.js`
|
||||
2. disable final cleanup by commenting out `done` and `teardown` callbacks
|
||||
3. possibly increase the `duration` and disable the `#offscreen` (by simply naming it `#off-screen`)
|
||||
|
||||
|
||||
## Unspecified Behavior ##
|
||||
|
||||
the following suites test behavior that is not covered in CSS3 Transitions (as of today):
|
||||
|
||||
* `properties-value-002.html` - verify value types transitionable but not specified for properties
|
||||
* `properties-value-003.html` - verify transitionable properties thus far not specified at all
|
||||
* `properties-value-implicit-001.html` - verify behavior for `em` based `<length>` properties when `font-size` is changed
|
||||
* `events-006.html` - expect `TransitionEnd` event to be triggered and `event.pseudoElement` to be set properly
|
||||
* `before-DOMContentLoaded-001.html` - expect transitions to be performed before DOM is ready
|
||||
* `before-load-001.html` - expect transitions to be performed before document is fully loaded
|
||||
* `hidden-container-001.html` - expect transitions to NOT be performed if they happen within hidden elements
|
||||
* `detached-container-001.html` - expect transitions to NOT be performed if they happen outside of the document
|
||||
|
||||
|
||||
## Yet To Be Tested ##
|
||||
|
||||
These are topics I have identifed in need of testing, but haven gotten around to testing them.
|
||||
|
||||
* Anything involving `<svg>`
|
||||
* well, maybe some day...
|
||||
* proper execution of timing-functions - are the right property values set at a given time?
|
||||
* how exactly do I pinpoint a specific time to verify a property's value at time `t`?
|
||||
* need to implement cubic-bezier to actually calculate a property's value at time `t`?
|
||||
* `selector:hover:before {}`
|
||||
* I have no clue how to trigger that from script
|
||||
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Transitioning before DOMContentLoaded event</title>
|
||||
<meta name="assert" content="Test checks that transitions are run even before the document has left parsing mode">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="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,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Transitioning before load event</title>
|
||||
<meta name="assert" content="Test checks that transitions are run even before all assets are loaded">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="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,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: behavior when transition parameters change while transitioning</title>
|
||||
<meta name="assert" content="Test checks that all transitions run properly when property or duration is changed mid-run">
|
||||
<link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-types">
|
||||
<!-- 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,140 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Not Transitioning within detached element</title>
|
||||
<meta name="assert" content="Test checks that transitions are NOT run within detached elements">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="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>
|
||||
150
tests/wpt/web-platform-tests/css/css-transitions/events-001.html
Normal file
150
tests/wpt/web-platform-tests/css/css-transitions/events-001.html
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event for shorthand property</title>
|
||||
<meta name="assert" content="This test checks that all transitionend events are triggered for shorthand property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="./support/helper.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .01s linear; ' +
|
||||
'padding-left: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:all changing padding-left');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for(Array(4).fill('transitionend'),
|
||||
{ record: 'all' }).then(evts => {
|
||||
assert_end_event_batch_equal(evts,
|
||||
[ 'padding-bottom',
|
||||
'padding-left',
|
||||
'padding-right',
|
||||
'padding-top' ],
|
||||
0.01);
|
||||
});
|
||||
}, 'transition:all changing padding');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px 10px 1px 10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for(Array(3).fill('transitionend'),
|
||||
{ record: 'all' }).then(evts => {
|
||||
assert_end_event_batch_equal(evts,
|
||||
[ 'padding-left',
|
||||
'padding-right',
|
||||
'padding-top' ],
|
||||
0.01);
|
||||
});
|
||||
}, 'transition:all changing padding but not padding-bottom');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding .01s linear; ' +
|
||||
'padding-left: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:padding changing padding-left');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for(Array(4).fill('transitionend'),
|
||||
{ record: 'all' }).then(evts => {
|
||||
assert_end_event_batch_equal(evts,
|
||||
[ 'padding-bottom',
|
||||
'padding-left',
|
||||
'padding-right',
|
||||
'padding-top' ],
|
||||
0.01);
|
||||
});
|
||||
}, 'transition:padding changing padding');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px 10px 1px 10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for(Array(3).fill('transitionend'),
|
||||
{ record: 'all' }).then(evts => {
|
||||
assert_end_event_batch_equal(evts,
|
||||
[ 'padding-left',
|
||||
'padding-right',
|
||||
'padding-top' ],
|
||||
0.01);
|
||||
});
|
||||
}, 'transition:padding changing padding but not padding-bottom');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' +
|
||||
'padding-left: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:padding-left changing padding-left');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:padding-left changing padding');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' +
|
||||
'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px 10px 1px 10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:padding-left changing padding but not padding-bottom');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event for implied property value</title>
|
||||
<meta name="assert" content="Test checks that all transitionend events are triggered for implied property value">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .01s linear' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01);
|
||||
});
|
||||
}, 'transition:all changing padding-left from nothing');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .01s linear' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for(Array(4).fill('transitionend'),
|
||||
{ record: 'all' }).then(evts => {
|
||||
assert_end_event_batch_equal(evts,
|
||||
[ 'padding-bottom',
|
||||
'padding-left',
|
||||
'padding-right',
|
||||
'padding-top' ],
|
||||
0.01);
|
||||
});
|
||||
}, 'transition:all changing padding from nothing');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event with negative delay</title>
|
||||
<meta name="assert" content="Test checks that transitionend event is triggered for duration time being canceled out by negative delay">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'transition: all .02s -.01s; ' +
|
||||
'padding-left: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.02);
|
||||
});
|
||||
}, 'duration: 0.02s, delay: -0.01s');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event with non matching lists</title>
|
||||
<meta name="assert" content="Test checks that non-matching lists are properly resolved">
|
||||
<link rel="help" title="2. Transitions - Example 3" href="http://www.w3.org/TR/css3-transitions/#list-matching">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
|
||||
div.style.transitionProperty =
|
||||
'padding-top, padding-right, padding-bottom, padding-left';
|
||||
div.style.transitionDuration = '0.02s, 0.01s';
|
||||
div.style.transitionTimingFunction = 'linear, ease-in';
|
||||
div.style.transitionDelay = '0.01s, 0.02s';
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, ['transitionend']);
|
||||
return watcher
|
||||
.wait_for(Array(4).fill('transitionend'), { record: 'all' })
|
||||
.then(evts => {
|
||||
assert_end_event_batch_equal(
|
||||
evts,
|
||||
[ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ],
|
||||
[ 0.02, 0.01, 0.02, 0.01 ]
|
||||
);
|
||||
});
|
||||
}, 'repeating lists');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { style: 'padding: 1px' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
|
||||
div.style.transitionProperty = 'padding-top';
|
||||
div.style.transitionDuration = '0.02s, 0.01s';
|
||||
div.style.transitionTimingFunction = 'linear, ease-in';
|
||||
div.style.transitionDelay = '0.01s, 0.02s';
|
||||
div.style.padding = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-top', 0.02);
|
||||
});
|
||||
}, 'truncating lists');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event with property specificity</title>
|
||||
<meta name="assert" content="Test checks that property specificity is properly resolved">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, {
|
||||
style:
|
||||
'transition: padding-left .01s, padding-left .02s;' +
|
||||
'padding-left: 1px'
|
||||
});
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.02);
|
||||
});
|
||||
}, 'property repetition');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, {
|
||||
style:
|
||||
'transition: padding .01s, padding-left .02s;' +
|
||||
'padding-left: 1px'
|
||||
});
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.02);
|
||||
});
|
||||
}, 'padding, padding-left');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, {
|
||||
style:
|
||||
'transition: padding-left .01s, padding .02s;' +
|
||||
'padding-left: 1px'
|
||||
});
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.style.paddingLeft = '10px';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.02);
|
||||
});
|
||||
}, 'padding-left, padding');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Transitions Test: transitionend event for pseudo elements</title>
|
||||
<meta name="assert" content="Test checks that TransitionEnd events are fired for pseudo-elements">
|
||||
<link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
|
||||
<link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
.before::before,
|
||||
.after:after {
|
||||
content: '';
|
||||
transition: padding-left .01s;
|
||||
padding-left: 1px;
|
||||
}
|
||||
.before.active::before,
|
||||
.after.active:after {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { 'class': 'before' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.classList.add('active');
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01, '::before');
|
||||
});
|
||||
}, 'transition padding-left on ::before');
|
||||
|
||||
promise_test(t => {
|
||||
const div = addDiv(t, { 'class': 'after' });
|
||||
getComputedStyle(div).paddingLeft;
|
||||
div.classList.add('active');
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
|
||||
return watcher.wait_for('transitionend').then(evt => {
|
||||
assert_end_events_equal(evt, 'padding-left', 0.01, '::after');
|
||||
});
|
||||
}, 'transition padding-left on ::after');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: no transitionend event after display:none</title>
|
||||
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-transitions/#transition-events">
|
||||
<link rel="help" href="https://lists.w3.org/Archives/Public/www-style/2015Apr/0405.html" title="[CSSWG] Minutes Telecon 2015-04-29" data-section-title="AnimationEnd events and display: none">
|
||||
<meta name="assert" content="Making an element display:none; while it has a transition in progress should prevent a transitionend event from getting fired.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
async_test(t => {
|
||||
window.addEventListener('load', function () {
|
||||
const div = addDiv(t, { 'style': 'transition: background-color 0.4s;' +
|
||||
'background-color: red' });
|
||||
getComputedStyle(div).backgroundColor;
|
||||
div.style.backgroundColor = 'blue';
|
||||
|
||||
// Wait until the transition has started before registering the event
|
||||
// listener. That way, if the transition finishes before the
|
||||
// requestAnimationFrame callback is called and the element is made
|
||||
// display:none, we won't report an error if transitionend is dispatched.
|
||||
//
|
||||
// In that case, there will be no indication that the test didn't test
|
||||
// anything. However, that's preferable to having this test fail
|
||||
// intermittently on slower automation hardware and end up being disabled
|
||||
// as a result.
|
||||
requestAnimationFrame(t.step_func(() => {
|
||||
div.addEventListener('transitionend', t.step_func(() => {
|
||||
assert_unreached('transitionend event didn\'t fire');
|
||||
}), false);
|
||||
|
||||
div.style.display = 'none';
|
||||
|
||||
setTimeout(t.done.bind(t), 500);
|
||||
}));
|
||||
}, false);
|
||||
}, 'transitionend should not be fired if the element is made display:none during the transition');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Not Transitioning within hidden element</title>
|
||||
<meta name="assert" content="Test checks that transitions are NOT run within hidden elements">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,701 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values</title>
|
||||
<meta name="assert" content="Test checks that value ranges between start and end while transitioning">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,160 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values of missing value types</title>
|
||||
<meta name="assert" content="Test checks that expected value types that haven't been specified are transitionable">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,335 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Intermediate Property Values of unspecified properties</title>
|
||||
<meta name="assert" content="Test checks that properties are transitionable that haven't been specified">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning property value "auto"</title>
|
||||
<meta name="assert" content="Test checks that properties are transitioned from an to auto-value">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,208 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: font-size-relative properties transition by implicit value change</title>
|
||||
<meta name="assert" content="Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed">
|
||||
<link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,711 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning inherited property values</title>
|
||||
<meta name="assert" content="Test checks that inherited property values that are transitioned on a parent element don't start a transition">
|
||||
<link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,712 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning inherited property values</title>
|
||||
<meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition">
|
||||
<link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,210 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transitioning implicitly inherited property values</title>
|
||||
<meta name="assert" content="Test checks that implicitly inherited property values that are transitioned on a parent element don't start a transition">
|
||||
<link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Transitioning Pseudo Elements</title>
|
||||
<meta name="assert" content="Test checks that transitions are run on pseudo elements">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
|
||||
<link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
|
||||
<script src="./support/properties.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#offscreen {
|
||||
position: absolute;
|
||||
top: -100000px;
|
||||
left: -100000px;
|
||||
width: 100000px;
|
||||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 id="fixture" class="fixture">
|
||||
<div class="container">
|
||||
<div class="transition">Text sample</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Transition Reference File</title>
|
||||
<link rel="author" title="Oleg Janeiko" href="mailto:oleg@the-incredible.me">
|
||||
<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 type="text/javascript" charset="utf-8">
|
||||
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>
|
||||
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,28 @@
|
|||
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-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/web-platform-tests/css/css-transitions/support/cat.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-transitions/support/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,231 @@
|
|||
(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) {
|
||||
var handler = 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");
|
||||
};
|
||||
data[elem].node.addEventListener('transitionend', handler, false);
|
||||
data[elem]._events = {'transitionend': handler};
|
||||
});
|
||||
},
|
||||
// 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 = window.requestAnimationFrame || 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,199 @@
|
|||
//
|
||||
// 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;
|
||||
};
|
||||
|
||||
// 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!');
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* The recommended minimum precision to use for time values.
|
||||
*
|
||||
* Based on Web Animations:
|
||||
* https://w3c.github.io/web-animations/#precision-of-time-values
|
||||
*/
|
||||
const TIME_PRECISION = 0.0005; // ms
|
||||
|
||||
/*
|
||||
* Allow implementations to substitute an alternative method for comparing
|
||||
* times based on their precision requirements.
|
||||
*/
|
||||
root.assert_times_equal = function(actual, expected, description) {
|
||||
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert that CSSTransition event, |evt|, has the expected property values
|
||||
* defined by |propertyName|, |elapsedTime|, and |pseudoElement|.
|
||||
*/
|
||||
root.assert_end_events_equal = function(evt, propertyName, elapsedTime,
|
||||
pseudoElement = '') {
|
||||
assert_equals(evt.propertyName, propertyName);
|
||||
assert_times_equal(evt.elapsedTime, elapsedTime);
|
||||
assert_equals(evt.pseudoElement, pseudoElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert that array of simultaneous CSSTransition events, |evts|, have the
|
||||
* corresponding property names listed in |propertyNames|, and the expected
|
||||
* |elapsedTimes| and |pseudoElement| members.
|
||||
*
|
||||
* |elapsedTimes| may be a single value if all events are expected to have the
|
||||
* same elapsedTime, or an array parallel to |propertyNames|.
|
||||
*/
|
||||
root.assert_end_event_batch_equal = function(evts, propertyNames, elapsedTimes,
|
||||
pseudoElement = '') {
|
||||
assert_equals(
|
||||
evts.length,
|
||||
propertyNames.length,
|
||||
'Test harness error: should have waited for the correct number of events'
|
||||
);
|
||||
assert_true(
|
||||
typeof elapsedTimes === 'number' ||
|
||||
(Array.isArray(elapsedTimes) &&
|
||||
elapsedTimes.length === propertyNames.length),
|
||||
'Test harness error: elapsedTimes must either be a number or an array of' +
|
||||
' numbers with the same length as propertyNames'
|
||||
);
|
||||
|
||||
if (typeof elapsedTimes === 'number') {
|
||||
elapsedTimes = Array(propertyNames.length).fill(elapsedTimes);
|
||||
}
|
||||
const testPairs = propertyNames.map((propertyName, index) => ({
|
||||
propertyName,
|
||||
elapsedTime: elapsedTimes[index]
|
||||
}));
|
||||
|
||||
const sortByPropertyName = (a, b) =>
|
||||
a.propertyName.localeCompare(b.propertyName);
|
||||
evts.sort(sortByPropertyName);
|
||||
testPairs.sort(sortByPropertyName);
|
||||
|
||||
for (let evt of evts) {
|
||||
const expected = testPairs.shift();
|
||||
assert_end_events_equal(
|
||||
evt,
|
||||
expected.propertyName,
|
||||
expected.elapsedTime,
|
||||
pseudoElement
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends a div to the document body.
|
||||
*
|
||||
* @param t The testharness.js Test object. If provided, this will be used
|
||||
* to register a cleanup callback to remove the div when the test
|
||||
* finishes.
|
||||
*
|
||||
* @param attrs A dictionary object with attribute names and values to set on
|
||||
* the div.
|
||||
*/
|
||||
root.addDiv = function(t, attrs) {
|
||||
var div = document.createElement('div');
|
||||
if (attrs) {
|
||||
for (var attrName in attrs) {
|
||||
div.setAttribute(attrName, attrs[attrName]);
|
||||
}
|
||||
}
|
||||
document.body.appendChild(div);
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(function() {
|
||||
if (div.parentNode) {
|
||||
div.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
return div;
|
||||
}
|
||||
|
||||
})(window);
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
BIN
tests/wpt/web-platform-tests/css/css-transitions/support/one.gif
Normal file
BIN
tests/wpt/web-platform-tests/css/css-transitions/support/one.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 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
|
||||
// https://drafts.csswg.org/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'],
|
||||
// https://drafts.csswg.org/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 |
|
|
@ -0,0 +1,4 @@
|
|||
The swatch-green.png file in this directory is really a RED swatch,
|
||||
and the swatch-red.png file is really a green swatch.
|
||||
|
||||
This directory is used to test relative URIs.
|
||||
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: 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 |
BIN
tests/wpt/web-platform-tests/css/css-transitions/support/two.gif
Normal file
BIN
tests/wpt/web-platform-tests/css/css-transitions/support/two.gif
Normal file
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,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing transition shorthand</title>
|
||||
<meta name="assert" content="Test checks that transition shorthand values are parsed properly">
|
||||
<link rel="help" title="2.5. The 'transition' Shorthand Property" href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '1s'": {},
|
||||
"parse '1s 2s'": {},
|
||||
"parse '1s 2s ease-in'": {},
|
||||
"parse '1s ease-in 2s'": {},
|
||||
"parse 'ease-in 1s 2s'": {},
|
||||
"parse '1s width'": {},
|
||||
"parse 'width 1s'": {},
|
||||
"parse '1s width 2s'": {},
|
||||
"parse '1s 2s width ease-in'": {},
|
||||
"parse '1s ease-in 2s width'": {},
|
||||
"parse 'width ease-in 1s 2s'": {},
|
||||
"parse 'width .1s ease-in .2s'": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- required by testharnessreport.js -->
|
||||
<div id="log"></div>
|
||||
<!-- elements used for testing -->
|
||||
<div id="container">
|
||||
<div id="transition"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
var ease = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
|
||||
var easeIn = 'cubic-bezier(0.42, 0, 1, 1)';
|
||||
// Note that order is important in this property. The first value that can be parsed as a time is assigned to
|
||||
// the transition-duration. The second value that can be parsed as a time is assigned to transition-delay.
|
||||
// [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
|
||||
var values = {
|
||||
// [property, duration, timing, delay]
|
||||
// random order
|
||||
'1s' : ["all", "1s", ease, "0s"],
|
||||
'1s 2s' : ["all", "1s", ease, "2s"],
|
||||
'1s 2s ease-in' : ["all", "1s", easeIn, "2s"],
|
||||
'1s ease-in 2s' : ["all", "1s", easeIn, "2s"],
|
||||
'ease-in 1s 2s' : ["all", "1s", easeIn, "2s"],
|
||||
'1s width' : ["width", "1s", ease, "0s"],
|
||||
'width 1s' : ["width", "1s", ease, "0s"],
|
||||
'1s width 2s' : ["width", "1s", ease, "2s"],
|
||||
'1s 2s width ease-in' : ["width", "1s", easeIn, "2s"],
|
||||
'1s ease-in 2s width' : ["width", "1s", easeIn, "2s"],
|
||||
'width ease-in 1s 2s' : ["width", "1s", easeIn, "2s"],
|
||||
'width .1s ease-in .2s' : ["width", "0.1s", easeIn, "0.2s"]
|
||||
};
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
'transition': key
|
||||
});
|
||||
// WET much?
|
||||
assert_equals(computedStyle(transition, 'transition-property'), values[key][0], "transition-property");
|
||||
assert_equals(computedStyle(transition, 'transition-duration'), values[key][1], "transition-duration");
|
||||
assert_equals(computedStyle(transition, 'transition-timing-function'), values[key][2], "transition-timing-function");
|
||||
assert_equals(computedStyle(transition, 'transition-delay'), values[key][3], "transition-delay");
|
||||
}, "parse '" + key + "'");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transition Test: transition-delay - positive number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition">
|
||||
<style>
|
||||
#test {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
transition-delay: 3s;
|
||||
transition-property: background-color;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately
|
||||
when the number inside square is <strong>3</strong>.</p>
|
||||
<div id="test">0</div>
|
||||
<script>
|
||||
var clicked = 0;
|
||||
var div = document.getElementById("test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
if (clicked == 0) {
|
||||
div.setAttribute("style", "background-color: green;");
|
||||
setInterval(function() {
|
||||
clicked++;
|
||||
div.innerHTML = clicked;
|
||||
}, 1000);
|
||||
}
|
||||
}, false);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing transition-delay</title>
|
||||
<meta name="assert" content="Test checks that transition-delay values are parsed properly">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<link rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" href="http://www.w3.org/TR/css3-values/#time">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '10.2s'": {},
|
||||
"parse '1s'": {},
|
||||
"parse '0.1s'": {},
|
||||
"parse '0.01s'": {},
|
||||
"parse '0.001s'": {},
|
||||
"parse '0.009s'": {},
|
||||
"parse '0s'": {},
|
||||
"parse '.0s'": {},
|
||||
"parse '0.0s'": {},
|
||||
"parse '.3s'": {},
|
||||
"parse '-5s'": {},
|
||||
"parse '10200ms'": {},
|
||||
"parse '1000ms'": {},
|
||||
"parse '100ms'": {},
|
||||
"parse '10ms'": {},
|
||||
"parse '9ms'": {},
|
||||
"parse '1ms'": {},
|
||||
"parse '0ms'": {},
|
||||
"parse '-500ms'": {},
|
||||
"parse '1s, 0.1s, 10ms'": {},
|
||||
"parse 'foobar'": { "flags": "invalid" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- required by testharnessreport.js -->
|
||||
<div id="log"></div>
|
||||
<!-- elements used for testing -->
|
||||
<div id="container">
|
||||
<div id="transition"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
// <time> [, <time>]*
|
||||
var values = {
|
||||
// seconds
|
||||
'10.2s': '10.2s',
|
||||
'1s': '1s',
|
||||
'0.1s': '0.1s',
|
||||
'0.01s': '0.01s',
|
||||
'0.001s': '0.001s',
|
||||
'0.009s': '0.009s',
|
||||
'0s': '0s',
|
||||
'0s': '0s',
|
||||
'.0s': '0s',
|
||||
'0.0s': '0s',
|
||||
'.3s': '0.3s',
|
||||
'-5s' : '-5s',
|
||||
// milliseconds
|
||||
'10200ms': '10.2s',
|
||||
'1000ms': '1s',
|
||||
'100ms': '0.1s',
|
||||
'10ms': '0.01s',
|
||||
'9ms': '0.009s',
|
||||
'1ms': '0.001s',
|
||||
'0ms': '0s',
|
||||
'-500ms' : '-0.5s',
|
||||
// combination
|
||||
'1s, 0.1s, 10ms': '1s, 0.1s, 0.01s',
|
||||
// invalid
|
||||
'foobar': '0s'
|
||||
};
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
'foobar': true
|
||||
};
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
'transition-delay': key
|
||||
});
|
||||
var result = computedStyle(transition, 'transition-delay');
|
||||
assert_equals(result, values[key], "Expected computed value");
|
||||
}, "parse '" + key + "'",
|
||||
{
|
||||
// mark tests that fail as such
|
||||
flags: invalidTests[key] ? "invalid" : ""
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transition Test: transition-delay - 0s</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'transition-delay' property set 0 will not delay the execution of transition">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-property: background-color;
|
||||
width: 100px;
|
||||
}
|
||||
#ref {
|
||||
background-color: gray;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately
|
||||
when the number inside blue square is 3.</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test">0</div>
|
||||
<script>
|
||||
var clicked = 0;
|
||||
var ref = document.getElementById("ref");
|
||||
var test = document.getElementById("test");
|
||||
test.addEventListener("click", function(evt) {
|
||||
if (clicked == 0) {
|
||||
ref.setAttribute("style", "background-color: green;");
|
||||
setInterval(function() {console.log(clicked);
|
||||
if (clicked == 2) {
|
||||
test.setAttribute("style", "background-color: green;");
|
||||
}
|
||||
clicked++;
|
||||
test.innerHTML = clicked;
|
||||
}, 1000);
|
||||
}
|
||||
}, false);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transition Test: transition-delay - negative number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-property: background-color;
|
||||
width: 100px;
|
||||
}
|
||||
#ref {
|
||||
background-color: gray;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
transition-delay: -3s;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately
|
||||
when the number inside blue square is 3.</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test">0</div>
|
||||
<script>
|
||||
var clicked = 0;
|
||||
var ref = document.getElementById("ref");
|
||||
var test = document.getElementById("test");
|
||||
test.addEventListener("click", function(evt) {
|
||||
if (clicked == 0) {
|
||||
ref.setAttribute("style", "background-color: green;");
|
||||
setInterval(function() {console.log(clicked);
|
||||
if (clicked == 2) {
|
||||
test.setAttribute("style", "background-color: green;");
|
||||
}
|
||||
clicked++;
|
||||
test.innerHTML = clicked;
|
||||
}, 1000);
|
||||
}
|
||||
}, false);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing transition-duration</title>
|
||||
<meta name="assert" content="Test checks that transition-duration values are parsed properly">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<link rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" href="http://www.w3.org/TR/css3-values/#time">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '10.2s'": {},
|
||||
"parse '1s'": {},
|
||||
"parse '0.1s'": {},
|
||||
"parse '0.01s'": {},
|
||||
"parse '0.001s'": {},
|
||||
"parse '0.009s'": {},
|
||||
"parse '0s'": {},
|
||||
"parse '.0s'": {},
|
||||
"parse '0.0s'": {},
|
||||
"parse '.3s'": {},
|
||||
"parse '-5s'": { "flags": "invalid" },
|
||||
"parse '10200ms'": {},
|
||||
"parse '1000ms'": {},
|
||||
"parse '100ms'": {},
|
||||
"parse '10ms'": {},
|
||||
"parse '9ms'": {},
|
||||
"parse '1ms'": {},
|
||||
"parse '0ms'": {},
|
||||
"parse '-500ms'": { "flags": "invalid" },
|
||||
"parse '1s, 0.1s, 10ms'": {},
|
||||
"parse 'foobar'": { "flags": "invalid" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- required by testharnessreport.js -->
|
||||
<div id="log"></div>
|
||||
<!-- elements used for testing -->
|
||||
<div id="container">
|
||||
<div id="transition"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
// <time> [, <time>]*
|
||||
var values = {
|
||||
// seconds
|
||||
'10.2s': '10.2s',
|
||||
'1s': '1s',
|
||||
'0.1s': '0.1s',
|
||||
'0.01s': '0.01s',
|
||||
'0.001s': '0.001s',
|
||||
'0.009s': '0.009s',
|
||||
'0s': '0s',
|
||||
'.0s': '0s',
|
||||
'0.0s': '0s',
|
||||
'.3s': '0.3s',
|
||||
'-5s' : '0s',
|
||||
// milliseconds
|
||||
'10200ms': '10.2s',
|
||||
'1000ms': '1s',
|
||||
'100ms': '0.1s',
|
||||
'10ms': '0.01s',
|
||||
'9ms': '0.009s',
|
||||
'1ms': '0.001s',
|
||||
'0ms': '0s',
|
||||
'-500ms' : '0s',
|
||||
// combination
|
||||
'1s, 0.1s, 10ms': '1s, 0.1s, 0.01s',
|
||||
// invalid
|
||||
'foobar': '0s'
|
||||
};
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
'-5s': true,
|
||||
'-500ms': true,
|
||||
'foobar': true
|
||||
};
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
'transition-duration': key
|
||||
});
|
||||
var result = computedStyle(transition, 'transition-duration');
|
||||
assert_equals(result, values[key], "Expected computed value");
|
||||
}, "parse '" + key + "'",
|
||||
{
|
||||
// mark tests that fail as such
|
||||
flags: invalidTests[key] ? "invalid" : ""
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-duration - positive number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take.">
|
||||
<style>
|
||||
div {
|
||||
background-color: yellow;
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the yellow square below. Test passes if the width of square stops growing when the number inside square is '2'.</p>
|
||||
<div>0</div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("div");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "width: 200px;");
|
||||
setInterval(function() {
|
||||
var timer = parseInt(div.textContent, 10);
|
||||
timer++;
|
||||
div.textContent = timer;
|
||||
}, 1000);
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-duration - 0s(initial value)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-property: width;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
#ref1 {
|
||||
background-color: yellow;
|
||||
transition-duration: 2s;
|
||||
}
|
||||
#ref2 {
|
||||
background-color: gray;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the gray and blue grow immediately.</p>
|
||||
<div id="ref1"></div>
|
||||
<div id="ref2"></div>
|
||||
<div id="test"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button"),
|
||||
test = document.querySelector("#test"),
|
||||
ref1 = document.querySelector("#ref1"),
|
||||
ref2 = document.querySelector("#ref2")
|
||||
button.addEventListener("click", function(evt) {
|
||||
test.setAttribute("style", "width: 300px;");
|
||||
ref1.setAttribute("style", "width: 300px;");
|
||||
ref2.setAttribute("style", "width: 300px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-duration - negative number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-property: width;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
#ref {
|
||||
background-color: yellow;
|
||||
transition-duration: 2s;
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
transition-duration: -2s;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button"),
|
||||
test = document.querySelector("#test"),
|
||||
ref = document.querySelector("#ref");
|
||||
button.addEventListener("click", function(evt) {
|
||||
test.setAttribute("style", "width: 200px;");
|
||||
ref.setAttribute("style", "width: 200px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing transition-property</title>
|
||||
<meta name="assert" content="Test checks that transition-property values are parsed properly">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse 'none'": {},
|
||||
"parse 'all'": {},
|
||||
"parse 'width'": {},
|
||||
"parse 'all, width'": {},
|
||||
"parse 'width, all'": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- required by testharnessreport.js -->
|
||||
<div id="log"></div>
|
||||
<!-- elements used for testing -->
|
||||
<div id="container">
|
||||
<div id="transition"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
var values = [
|
||||
'none', 'all', 'width', 'all, width', 'width, all'
|
||||
];
|
||||
|
||||
for (var i = 0, value; value = values[i]; i++) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
'transition-property': value
|
||||
});
|
||||
var result = computedStyle(transition, 'transition-property');
|
||||
assert_equals(result, value);
|
||||
}, "parse '" + value + "'");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing invalid transition-property</title>
|
||||
<meta name="assert" content="Test checks that unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
|
||||
<meta name="flags" content="dom ">
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse 'none, all'": {},
|
||||
"parse 'all, none'": {},
|
||||
"parse 'foobar'": {},
|
||||
"parse 'all, foobar'": {},
|
||||
"parse 'foobar, all'": {},
|
||||
"parse 'inherit'": {},
|
||||
"parse 'initial'": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- required by testharnessreport.js -->
|
||||
<div id="log"></div>
|
||||
<!-- elements used for testing -->
|
||||
<div id="container">
|
||||
<div id="transition"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
var values = {
|
||||
'none, all' : 'none, all',
|
||||
'all, none' : 'all, none',
|
||||
'foobar' : 'foobar',
|
||||
'all, foobar' : 'all, foobar',
|
||||
'foobar, all' : 'foobar, all',
|
||||
'inherit' : 'padding',
|
||||
'initial' : 'all'
|
||||
};
|
||||
|
||||
for (var key in values) {
|
||||
test(function() {
|
||||
setStyle({
|
||||
'#container': {'transition-property': 'padding'},
|
||||
'#transition': {'transition-property': key}
|
||||
});
|
||||
var result = computedStyle(transition, 'transition-property');
|
||||
assert_equals(result, values[key]);
|
||||
}, "parse '" + key + "'");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - none</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set 'none' means that no property will be transitioned.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
#ref {
|
||||
background-color: yellow;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
transition-property: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button"),
|
||||
test = document.querySelector("#test"),
|
||||
ref = document.querySelector("#ref");
|
||||
button.addEventListener("click", function(evt) {
|
||||
test.setAttribute("style", "width: 200px;");
|
||||
ref.setAttribute("style", "width: 200px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - all</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set 'all' means that all properties are transitioned.">
|
||||
<style>
|
||||
#test {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: all;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the blue square below. Test passes if both height and width of blue square grow smoothly.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "height: 200px; width: 200px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - height width(more than one properties specified)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set more than one properties like 'height, width'
|
||||
means only the specified properties will be transitioned.">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: height, width;
|
||||
transition-timing-function: linear;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the red square below. Test passes if both height and width of square grow smoothly but the color changed to green immediately.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "background-color: green; height: 200px; width: 200px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - background-position</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'background-position' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 1px solid;
|
||||
background-image: url("support/cat.png");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
transition-duration: 8s;
|
||||
transition-property: background-position;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the image inside of box below. Test passes if the image moves gradually but not immediately from left to right until it stops.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "background-position: right;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-bottom-color</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-bottom-color' property animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 10px solid red;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-bottom-color;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with red border below. Test passes if the color of bottom border transforms to green gradually not immediately.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-bottom-color: green;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-bottom-width</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-bottom-width' property animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 5px solid blue;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-bottom-width;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with blue border below. Test passes if the height of bottom border grows gradually not immediately until it stops.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-bottom-width: 20px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-left-color</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-left-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 10px solid red;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-left-color;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with red border below. Test passes if the color of left border transforms to green gradually not immediately.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-left-color: green;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-left-width</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-left-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 5px solid blue;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-left-width;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with blue border below. Test passes if the width of left border grows gradually not immediately until it stops.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-left-width: 20px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-right-color</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-right-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 10px solid red;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-right-color;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with red border below. Test passes if the color of right border transforms to green gradually not immediately.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-right-color: green;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-right-width</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-right-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 5px solid blue;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-right-width;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with blue border below. Test passes if the width of right border grows gradually not immediately until it stops.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-right-width: 20px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-top-color</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-top-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 10px solid red;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-top-color;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with red border below. Test passes if the color of top border transforms to green gradually not immediately.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-top-color: green;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-top-width</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-top-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border: 5px solid blue;
|
||||
height: 90px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-top-width;
|
||||
transition-timing-function: linear;
|
||||
width: 90px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the square with blue border below. Test passes if the height of top border grows gradually not immediately until it stops.</p>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
(function() {
|
||||
var div = document.querySelector("#test");
|
||||
div.addEventListener("click", function(evt) {
|
||||
div.setAttribute("style", "border-top-width: 20px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-property - border-spacing</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-spacing' property is animatable.">
|
||||
<style>
|
||||
#test {
|
||||
border-spacing: 10px;
|
||||
transition-duration: 2s;
|
||||
transition-property: border-spacing;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'FillerText' below. Test passes if the outermost border of 'FillerText' grows gradually not immediately until it stops.</p>
|
||||
<table id="test" border="1">
|
||||
<tr><td>FillerText</td></tr>
|
||||
</table>
|
||||
<script>
|
||||
(function() {
|
||||
var test = document.querySelector("#test");
|
||||
test.addEventListener("click", function(evt) {
|
||||
test.setAttribute("style", "border-spacing: 40px;");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
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