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

Add support for canceling CSS transitions

Browse source 
This change adds support for canceling CSS transitions when a property
is no longer transitionable or when an element becomes styled with
display:none. Support for canceling and replacing CSS transitions when
the end value changes is still pending. This change also takes advantage
of updating the constellation message to fix a bug where transition
events could be sent for closed pipelines.

Fixes #15079.
This commit is contained in:
Martin Robinson 2020-04-21 16:32:53 +02:00
parent 99cd30eaad
commit 453b252a65
15 changed files with 351 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/metadata/MANIFEST.json
View file

@ -398363,6 +398363,13 @@
}
]
],
"transitioncancel-002.html": [
"e62b17b5dc60ef762e0a0780c967b6e014da5bc9",
[
null,
{}
]
],
"transitionevent-interface.html": [
"a40ba4537518361c13aab1d9b0648387f7c88aaa",
[

18
tests/wpt/metadata/css/css-transitions/idlharness.html.ini
View file

@ -5,42 +5,24 @@
[HTMLElement interface: attribute ontransitionstart]
expected: FAIL
[Document interface: attribute ontransitioncancel]
expected: FAIL
[Document interface: document must inherit property "ontransitionstart" with the proper type]
expected: FAIL
[Document interface: document must inherit property "ontransitioncancel" with the proper type]
expected: FAIL
[HTMLElement interface: attribute ontransitionrun]
expected: FAIL
[HTMLElement interface: document must inherit property "ontransitioncancel" with the proper type]
expected: FAIL
[Window interface: attribute ontransitionrun]
expected: FAIL
[Window interface: attribute ontransitioncancel]
expected: FAIL
[HTMLElement interface: document must inherit property "ontransitionstart" with the proper type]
expected: FAIL
[HTMLElement interface: attribute ontransitioncancel]
expected: FAIL
[HTMLElement interface: document must inherit property "ontransitionrun" with the proper type]
expected: FAIL
[Window interface: window must inherit property "ontransitionrun" with the proper type]
expected: FAIL
[Window interface: window must inherit property "ontransitioncancel" with the proper type]
expected: FAIL
[Document interface: attribute ontransitionstart]
expected: FAIL

4
tests/wpt/metadata/css/css-transitions/transitioncancel-001.html.ini
View file

@ -1,4 +0,0 @@
[transitioncancel-001.html]
[transitioncancel should be fired if the element is made display:none during the transition]
expected: FAIL

46
tests/wpt/web-platform-tests/css/css-transitions/transitioncancel-002.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: Removing transitioning property from transition-property triggers transitioncancel</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<meta name="assert" content="Removing transitioning property from transition-property
causes transitioncancel.">
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch">
<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 and prepare to trigger a transition on it.
const div = addDiv(t, {
style: 'transition: background-color 0.25s; background-color: red;',
});
// Attach event listeners
const eventWatcher = new EventWatcher(t, div, ['transitioncancel']);
div.addEventListener('transitionend', t.step_func((event) => {
assert_unreached('transitionend event should not be fired');
}));
// Trigger transition
getComputedStyle(div).backgroundColor;
div.style.backgroundColor = 'green';
getComputedStyle(div).backgroundColor;
// Remove the transitioning property from transition-property asynchronously.
await waitForFrame();
div.style.transitionProperty = 'none';
await eventWatcher.wait_for('transitioncancel');
}, 'Removing a transitioning property from transition-property should trigger transitioncancel');
</script>
</body>
</html>