Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-08 15:05:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision d3cf77a7b8c20c678b725238eaa8a72eca3787ae

Browse source
This commit is contained in:
WPT Sync Bot 2019-04-25 22:18:37 -04:00
parent 880f3b8b7a
commit efca990ffe
541 changed files with 8000 additions and 2276 deletions
Download patch file Download diff file Expand all files Collapse all files

89
tests/wpt/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html
View file

@ -36,47 +36,88 @@ test(t => {
}, 'getAnimations for CSS Transitions');
test(t => {
addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
'transition: all 100s;',
'.init::before': 'content: ""; width: 0px; ' +
'transition: all 10s;',
'.change::after': 'width: 100px;',
'.change::before': 'width: 100px;' });
// create two divs with these arrangement:
// Create two divs with the following arrangement:
//
// parent
// (::marker,)
// ::before,
// ::after
// |
// child
const parent = addDiv(t);
addStyle(t, {
'.init::after': 'content: ""; width: 0px; transition: all 100s;',
'.init::before': 'content: ""; width: 0px; transition: all 100s;',
'.change::after': 'width: 100px;',
'.change::before': 'width: 100px;',
});
const supportsMarkerPseudos = CSS.supports('selector(::marker)');
if (supportsMarkerPseudos) {
addStyle(t, {
'.init::marker': 'content: ""; color: red; transition: all 100s;',
'.change::marker': 'color: green;',
});
}
const parent = addDiv(t, { 'style': 'display: list-item' });
const child = addDiv(t);
parent.appendChild(child);
parent.style.left = '0px';
parent.style.transition = 'left 10s';
parent.style.transition = 'left 100s';
parent.classList.add('init');
child.style.left = '0px';
child.style.transition = 'left 10s';
child.style.transition = 'left 100s';
getComputedStyle(parent).left;
parent.style.left = '100px';
parent.classList.add('change');
child.style.left = '100px';
const anims = document.getAnimations();
assert_equals(anims.length, 4,
'CSS transition on both pseudo-elements and elements ' +
'are returned');
assert_equals(anims[0].effect.target, parent,
'The animation targeting the parent element comes first');
assert_equals(anims[1].effect.target.type, '::before',
'The animation targeting the ::before element comes second');
assert_equals(anims[2].effect.target.type, '::after',
'The animation targeting the ::after element comes third');
assert_equals(anims[3].effect.target, child,
'The animation targeting the child element comes last');
}, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
'after sorting');
const expectedTransitions = [
[parent, undefined],
[parent, '::marker'],
[parent, '::before'],
[parent, '::after'],
[child, undefined],
];
if (!supportsMarkerPseudos) {
expectedTransitions.splice(1, 1);
}
const transitions = document.getAnimations();
assert_equals(
transitions.length,
expectedTransitions.length,
'CSS transition on both pseudo-elements and elements are returned'
);
for (const [index, expected] of expectedTransitions.entries()) {
const [element, pseudo] = expected;
const actual = transitions[index];
if (pseudo) {
assert_equals(
actual.effect.target.element,
element,
`Transition #${index + 1} has expected target`
);
assert_equals(
actual.effect.target.type,
pseudo,
`Transition #${index + 1} has expected pseudo type`
);
} else {
assert_equals(
actual.effect.target,
element,
`Transition #${index + 1} has expected target`
);
}
}
}, 'CSS Transitions targetting (pseudo-)elements should have correct order '
+ 'after sorting');
promise_test(async t => {
const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });

1
tests/wpt/web-platform-tests/css/css-transitions/README.md
View file

@ -56,7 +56,6 @@ the following suites test behavior that is not covered in CSS3 Transitions (as o
* `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

148
tests/wpt/web-platform-tests/css/css-transitions/before-DOMContentLoaded-001.html
View file

@ -1,148 +0,0 @@
<!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>
</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,
// 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&amp;delay=3000"></script>
</body>
</html>

176
tests/wpt/web-platform-tests/css/css-transitions/before-load-001.html
View file

@ -1,150 +1,46 @@
<!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">
<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 the load event fires">
<!-- NOTE: This test covers unspecified behavior and should probably be
removed. It this behavior *were* specified, it would probably be
specified here: -->
<link rel="help" title="5. Transition Events" href="https://drafts.csswg.org/css-transitions/#starting">
<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="/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>
<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>
</head>
<body>
<style type="text/css">
#offscreen {
position: absolute;
top: -100000px;
left: -100000px;
width: 100000px;
height: 100000px;
}
</style>
</head>
<body>
<!-- required by testharnessreport.js -->
<div id="log"></div>
<!-- elements used for testing -->
<div id="fixture" class="fixture">
<div class="container">
<div class="transition">Text sample</div>
</div>
</div>
<div id="offs-creen"></div>
<script>
// Make sure a transition can run before the load event fires.
<!--
SEE ./support/README.md for an abstract explanation of the test procedure
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
-->
let loadEventFired = false;
window.addEventListener('load', () => {
loadEventFired = true;
}, false);
<script>
// make sure a transition is run between DOMContentLoaded and load
async_test(t => {
const div = addDiv(t, { style: 'transition: height .01s linear; ' +
'height: 1px' });
getComputedStyle(div).height;
div.style.height = '100px';
// this test takes its time, give it a minute to run
var timeout = 60000;
setup({timeout: timeout});
div.addEventListener('transitionrun', t.step_func_done(() => {
assert_false(
loadEventFired,
'load event should not have fired yet'
);
document.getElementById('cat').src = '';
}));
});
</script>
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,
// 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&amp;delay=3000" alt="dummy image">
</body>
<img src="support/cat.png?pipe=trickle(d100)" id="cat">
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-transitions/changing-while-transition-001.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: behavior when transition-duration changes while transitioning</title>
<meta name="assert" content="Checks a change to the transition-duration
property does not affect an in-flight transition">
<link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
// Start a 100s transition 50% of the way through
const div = addDiv(t, {
style: 'transition: height 100s -50s linear; height: 0px',
});
getComputedStyle(div).height;
div.style.height = '100px';
assert_equals(
getComputedStyle(div).height,
'50px',
'Transition should be initially 50% complete'
);
// Extend the transition-duration to 200s.
div.style.transitionDuration = '200s';
// If the change to the transition-duration was reflected, the
// computed height would now be '25px'.
assert_equals(
getComputedStyle(div).height,
'50px',
'Even after updating the transition-duration, the transition should be 50% complete'
);
// Wait a frame just to be sure that the changed duration is not later
// updated.
await waitForFrame();
assert_greater_than_equal(
parseInt(getComputedStyle(div).height),
50,
'Even in the next frame the updated transition-duration should not apply'
);
}, 'Changes to transition-duration should not affect in-flight transitions');
</script>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-transitions/changing-while-transition-002.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: behavior when transition-timing-function changes while transitioning</title>
<meta name="assert" content="Checks a change to the transition-timing-function
property does not affect an in-flight transition">
<link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
// Start a transition 50% of the way through with a linear timing function
const div = addDiv(t, {
style: 'transition: height 100s -50s linear; height: 0px',
});
getComputedStyle(div).height;
div.style.height = '100px';
assert_equals(
getComputedStyle(div).height,
'50px',
'Transition should be initially 50% complete'
);
// Update the timing function
div.style.transitionTimingFunction = 'steps(1, end)';
// If the change to the transition-timing-function was reflected, the
// computed height would now be '0px'.
assert_equals(
getComputedStyle(div).height,
'50px',
'Even after updating the transition-timing-function, the transition should be 50% complete'
);
// Wait a frame just to be sure that the changed timing function is not later
// updated.
await waitForFrame();
assert_greater_than_equal(
parseInt(getComputedStyle(div).height),
50,
'Even in the next frame the updated transition-timing-function should not apply'
);
}, 'Changes to transition-timing-function should not affect in-flight transitions');
</script>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-transitions/changing-while-transition-003.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: behavior when transition-delay changes while transitioning</title>
<meta name="assert" content="Checks a change to the transition-delay
property does not affect an in-flight transition">
<link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
// Start a 200s transition 50% of the way through
const div = addDiv(t, {
style: 'transition: height 200s -100s linear; height: 0px',
});
getComputedStyle(div).height;
div.style.height = '100px';
assert_equals(
getComputedStyle(div).height,
'50px',
'Transition should be initially 50% complete'
);
// Set the transition-delay to -50s.
div.style.transitionDelay = '-50s';
// If the change to the transition-delay was reflected, the
// computed height would now be '25px'.
assert_equals(
getComputedStyle(div).height,
'50px',
'Even after updating the transition-delay, the transition should be 50% complete'
);
// Wait a frame just to be sure that the changed delay is not later
// updated.
await waitForFrame();
assert_greater_than_equal(
parseInt(getComputedStyle(div).height),
50,
'Even in the next frame the updated transition-delay should not apply'
);
}, 'Changes to transition-delay should not affect in-flight transitions');
</script>
</body>
</html>

146
tests/wpt/web-platform-tests/css/css-transitions/changing-while-transition.html
View file

@ -1,146 +0,0 @@
<!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>
</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,
// 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>

71
tests/wpt/web-platform-tests/css/css-transitions/currentcolor-animation-001.html
View file

@ -1,39 +1,52 @@
<!DOCTYPE HTML>
<!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>
<meta charset=utf-8>
<title>CSS Transitions of currentcolor</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla Corporation" href="https://mozilla.com/">
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
<link rel="help" href="https://drafts.csswg.org/css-color/#resolving-color-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id=log></div>
<div id="log"></div>
<div id="test"></div>
<script>
// Transition does not occur when the value is currentColor and color changes
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");
test(() => {
const div = document.getElementById('test');
const cs = getComputedStyle(div, '');
// Setup before-change style
div.style.color = 'red';
div.style.backgroundColor = 'currentcolor';
cs.backgroundColor; // Flush style
// Change color -- this should NOT trigger a transition because as per [1]
// the computed value of 'currentcolor' for properties other than 'color'
// is 'currentcolor' and transitions operate on computed values (not used
// values).
//
// [1] https://drafts.csswg.org/css-color/#resolving-color-values
div.style.transition = 'background-color linear 50s -10s';
div.style.color = 'blue';
const valueAfterUpdatingColor = cs.backgroundColor;
// Generate some reference values for comparing
div.style.transition = '';
div.style.backgroundColor = 'rgb(204, 0, 51)';
const quarterReference = cs.backgroundColor;
div.style.backgroundColor = 'blue';
const finalReference = cs.backgroundColor;
assert_true(
valueAfterUpdatingColor != quarterReference &&
valueAfterUpdatingColor == finalReference
);
}, 'Transition does not occur when the value is currentcolor and color changes');
</script>
</body>

131
tests/wpt/web-platform-tests/css/css-transitions/detached-container-001.html
View file

@ -1,131 +0,0 @@
<!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>
</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,
// 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>

203
tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html Normal file
View file

@ -0,0 +1,203 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: Transitions do not run for a disconnected element</title>
<meta name="assert" content="If an element is not in the document during that
style change event or was not in the document during the previous style change
event, then transitions are not started for that element in that style change
event.">
<meta name="assert" content="If an element is no longer in the document,
implementations must cancel any running transitions on it and remove transitions
on it from the completed transitions.">
<link rel="help" title="Starting transitions"
href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
// Create element but do not attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Set up after-change style
div.style.backgroundColor = 'green';
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(255, 0, 0)',
'No transition should run'
);
// Wait a frame just to be sure the UA does not start the transition on the
// next frame.
await waitForFrame();
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(255, 0, 0)',
'No transition should run even after waiting a frame'
);
}, 'Transitions do not run on an element not in the document');
test(t => {
// Create element but do not attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Add to document
document.documentElement.append(div);
// Set up after-change style
div.style.backgroundColor = 'green';
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(0, 128, 0)',
'No transition should run'
);
}, 'Transitions do not run for an element newly added to the document');
promise_test(async t => {
// Create element and attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
document.documentElement.append(div);
// Attach event listeners
div.addEventListener('transitionrun', t.step_func(() => {
assert_unreached('transitionrun event should not be fired');
}));
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Set up after-change style
div.style.backgroundColor = 'green';
// But remove the document before the next style change event
div.remove();
// There should be no events received for the triggered transition.
//
// (We can't verify the presence/absence of transitions by querying
// getComputedStyle for this case because it will return an empty string.)
await waitForFrame();
await waitForFrame();
}, 'Transitions do not run for an element newly removed from the document');
promise_test(async t => {
// Create element and attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
document.documentElement.append(div);
// Attach event listeners
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).backgroundColor;
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
await eventWatcher.wait_for('transitionrun');
// Remove the element from the document
div.remove();
await eventWatcher.wait_for('transitioncancel');
}, 'Transitions are canceled when an element is removed from the document');
promise_test(async t => {
// Create a container element. We'll need this later.
const container = addDiv(t);
document.documentElement.append(container);
// Create element and attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
document.documentElement.append(div);
// Attach event listeners
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).backgroundColor;
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
await eventWatcher.wait_for('transitionrun');
// Re-parent element
container.append(div);
await eventWatcher.wait_for('transitioncancel');
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(0, 128, 0)',
'There should be no transition after re-parenting'
);
}, 'Transitions are canceled when an element is re-parented');
promise_test(async t => {
// Create a container element. We'll need this later.
const container = addDiv(t);
document.documentElement.append(container);
// Create element and attach it to the document
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
document.documentElement.append(div);
// Attach event listeners
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).backgroundColor;
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
await eventWatcher.wait_for('transitionrun');
// Re-parent element to same container
document.documentElement.append(div);
await eventWatcher.wait_for('transitioncancel');
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(0, 128, 0)',
'There should be no transition after re-parenting'
);
}, 'Transitions are canceled when an element is re-parented to the same node');
</script>
</body>
</html>

125
tests/wpt/web-platform-tests/css/css-transitions/hidden-container-001.html
View file

@ -1,125 +0,0 @@
<!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>
</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,
// 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>

127
tests/wpt/web-platform-tests/css/css-transitions/non-rendered-element-001.html Normal file
View file

@ -0,0 +1,127 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: Transitions do not run for an element that is not being rendered</title>
<link rel="help" title="Starting transitions"
href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
// Create element that is not rendered
const div = addDiv(t, {
style:
'transition: background-color 100s;' +
'background-color: red;' +
'display: none',
});
// Attach event listeners
div.addEventListener(
'transitionrun',
t.step_func(() => {
assert_unreached('transitionrun event should not be fired');
})
);
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Set up and resolve after-change style
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
// There should be no events received for the triggered transition.
await waitForFrame();
await waitForFrame();
}, 'Transitions do not run on an element not being rendered');
test(t => {
// Create element that is not rendered
const div = addDiv(t, {
style:
'transition: background-color 100s;' +
'background-color: red;' +
'display: none',
});
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Make it rendered
div.style.display = 'block';
// Set up and resolve after-change style
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
// We should have jumped immediately to the after-change style rather than
// transitioning to it.
assert_equals(
getComputedStyle(div).backgroundColor,
'rgb(0, 128, 0)',
'No transition should run'
);
}, 'Transitions do not run for an element newly rendered');
promise_test(async t => {
// Create element
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
// Attach event listeners
div.addEventListener('transitionrun', t.step_func(() => {
assert_unreached('transitionrun event should not be fired');
}));
// Resolve before-change style
getComputedStyle(div).backgroundColor;
// Set up after-change style
div.style.backgroundColor = 'green';
// But make the element non-rendered
div.style.display = 'none';
// There should be no events received for the triggered transition.
await waitForFrame();
await waitForFrame();
}, 'Transitions do not run for an element newly made not rendered');
promise_test(async t => {
// Create element
const div = addDiv(t, {
style: 'transition: background-color 100s; background-color: red',
});
// Attach event listeners
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).backgroundColor;
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
await eventWatcher.wait_for('transitionrun');
// Make the element no longer rendered
div.style.display = 'none';
await eventWatcher.wait_for('transitioncancel');
}, 'Transitions are canceled when an element is no longer rendered');
</script>
</body>
</html>

90
tests/wpt/web-platform-tests/css/css-transitions/non-rendered-element-002.html Normal file
View file

@ -0,0 +1,90 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered</title>
<link rel="help" title="Starting transitions"
href="https://drafts.csswg.org/css-transitions/#starting">
<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(async t => {
for (const pseudoType of ['before', 'after']) {
const style = addStyle(t, {
[`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;',
[`.change::${pseudoType}`]: 'width: 100px;',
[`.cancel::${pseudoType}`]: 'content: none',
});
// Create element (and pseudo-element) and attach event listeners
const div = addDiv(t);
div.classList.add('init');
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).width;
div.classList.add('change');
getComputedStyle(div).width;
await eventWatcher.wait_for('transitionrun');
// Make the pseudo-element no longer rendered
div.classList.add('cancel');
await eventWatcher.wait_for('transitioncancel');
div.remove();
style.remove();
}
}, 'Transitions on ::before/::after pseudo-elements are canceled when the'
+ ' content property is cleared');
promise_test(async t => {
if (!CSS.supports('selector(::marker)')) {
return;
}
addStyle(t, {
'.init::marker': 'content: ""; color: red; transition: color 100s;',
'.change::marker': 'color: green',
});
// Create element (and pseudo-element) and attach event listeners
const div = addDiv(t, { 'style': 'display: list-item' });
div.classList.add('init');
const eventWatcher = new EventWatcher(t, div, [
'transitionrun',
'transitioncancel',
]);
// Trigger transition
getComputedStyle(div).color;
div.classList.add('change');
getComputedStyle(div).color;
await eventWatcher.wait_for('transitionrun');
// Make the parent element no longer display: list-item so that the pseudo
// element no longer renders
div.style.display = 'block';
await eventWatcher.wait_for('transitioncancel');
}, 'Transitions on ::marker pseudo-elements are canceled when the'
+ ' parent display type is no longer list-item');
</script>
</body>
</html>

45
tests/wpt/web-platform-tests/css/css-transitions/starting-of-transitions-001.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: behavior when transition-property changes while transitioning</title>
<meta name="assert" content="Checks a change to the transition-duration
property does not affect an in-flight transition">
<link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">
<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>
test(t => {
// Start a 100s transition 50% of the way through
const div = addDiv(t, {
style: 'transition: height 100s -50s linear; height: 0px',
});
getComputedStyle(div).height;
div.style.height = '100px';
assert_equals(
getComputedStyle(div).height,
'50px',
'Transition should be initially 50% complete'
);
// Change the transition-property and flush the style change
div.style.transitionProperty = 'width';
getComputedStyle(div).transitionProperty;
// The transition on the height property should have been canceled
assert_equals(
getComputedStyle(div).height,
'100px',
'Transition should have been canceled'
);
}, 'changes to transition-property should cancel in-flight transitions');
</script>
</body>
</html>

1
tests/wpt/web-platform-tests/css/css-transitions/support/helper.js
View file

@ -231,6 +231,7 @@ root.addStyle = (t, rules) => {
extraStyle.remove();
});
}
return extraStyle;
};
/**