Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 10:44:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1650189 - Fix an off-by-one in the transition property iterator. r=mrobinson

Browse Source 
By the time we get to iterate over the longhands of a shorthand, we've
already advanced the range iterator, so we look at the next duration and
such, which causes this bug.

I'm seriously baffled that no existing test caught this when it
landed, neither in our internal test suite nor wpt...  :/

Differential Revision: https://phabricator.services.mozilla.com/D82396
This commit is contained in:
Emilio Cobos Álvarez 2020-07-06 16:26:20 +00:00
parent 22c27661b9
commit 8a684e8429
2 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
servo/components/style/properties/helpers/animated_properties.mako.rs
View File

@ -820,7 +820,7 @@ impl<'a> Iterator for TransitionPropertyIterator<'a> {
if let Some(longhand_id) = longhand_iterator.next() {
return Some(TransitionPropertyIteration {
longhand_id,
index: self.index_range.start,
index: self.index_range.start - 1,
});
}
self.longhand_iterator = None;

39
testing/web-platform/tests/css/css-transitions/transition-duration-shorthand.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-duration-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1650189">
<link rel="author" href="http://mellthas.de" title="Till Berger">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<title>transition-duration when looking at shorthand properties should be correct</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
transition: all 100s, height 0s;
}
div.trigger {
width: 200px;
height: 200px;
}
</style>
<div></div>
<script>
promise_test(async function (t) {
let div = document.querySelector("div");
let cs = getComputedStyle(div);
assert_equals(cs.width, "100px", "Width should start off correct");
assert_equals(cs.height, "100px", "Height should start off correct");
div.classList.add("trigger");
await new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(resolve));
});
assert_not_equals(cs.width, "200px", "Width should not have advanced to the end of the transition right away");
assert_equals(cs.height, "200px", "Height should have advanced to the end of the transition right away");
});
</script>