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

Avoid starting transitions if values can't be interpolated (#35234)

Browse source 
Bumps Stylo to https://github.com/servo/stylo/pull/115

This is mainly to avoid firing events like `transitionstart` when the
transition isn't actually allowed.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-31 08:37:59 -08:00 • committed by GitHub
parent 35835af857
commit a4c6c205d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 60 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/meta/MANIFEST.json vendored
View file

@ -591977,6 +591977,13 @@
{}
]
],
"transition-behavior-events.html": [
"e3e66c12dab0cac73657e992244e4adb9e831263",
[
null,
{}
]
],
"transition-behavior.html": [
"4c2ddb3c63baa3e146af1427293c7dedd8b8564c",
[

41
tests/wpt/tests/css/css-transitions/transition-behavior-events.html vendored Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>CSS transition event dispatch depending on transition-behavior</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#event-transitionevent">
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property">
<meta name="assert" content="
Even for a property like `width` which has a non-discrete animation type,
transitions among non-interpolable values should only start (as observed
by the `transitionrun` and `transitionstart` events) if discrete transitions
are allowed by `transition-behavior`.
">
<style>
#width1, #width2 {
width: auto;
transition: width 3s -1s linear;
}
</style>
<div id="width1" style="transition-behavior: normal"></div>
<div id="width2" style="transition-behavior: allow-discrete"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
promise_setup(() => new Promise((resolve, reject) => {
for (let event of ["transitionrun", "transitionstart"]) {
let event_log = [];
addEventListener(event, event => {
event_log.push(event.target.id);
});
promise_test(async function() {
assert_array_equals(event_log, ["width2"], "Should only get " + event + " event on #width2");
}, event + " events");
}
document.body.offsetLeft;
addEventListener("error", event => reject(event.message));
requestAnimationFrame(() => {
document.getElementById("width1").style.width = document.getElementById("width2").style.width = "100px";
requestAnimationFrame(resolve);
});
}));
</script>