Skip to content

Commit 0663e2d

Browse files
dbaronchromium-wpt-export-bot
dbaron
authored and
chromium-wpt-export-bot
committed
Invalidate when PendingLayer effect node changes.
This is needed because, when the result of DecompositeEffect changes, it can change the effect node on the PendingLayer without changing the effect node on any of the paint chunks. Both added tests fail reliably without this change and pass with it. Fixed: 1330438 Change-Id: I1fd5a92dbf582d888dac04751c915c1049f7e659 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3692324 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1012030}
1 parent d3b6590 commit 0663e2d

File tree

3 files changed

+122
-0
lines changed

3 files changed

+122
-0
lines changed

‎css/css-color/animation/opacity-animation-ending-correctly-001-ref.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<title>CSS Test Reference (Color): ending of opacity animation</title>
4+
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
5+
<link rel="author" title="Google" href="https://www.google.com/">
6+
7+
<style>
8+
#test {
9+
position: sticky;
10+
top: 0;
11+
height: 50px;
12+
background: blue;
13+
opacity: 0.2;
14+
}
15+
16+
.tall {
17+
height: 5000px;
18+
}
19+
</style>
20+
21+
<div id="test">
22+
</div>
23+
<div class="tall">
24+
</div>

‎css/css-color/animation/opacity-animation-ending-correctly-001.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE HTML>
2+
<html class="reftest-wait">
3+
<title>CSS Test (Color): ending of opacity animation</title>
4+
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
5+
<link rel="author" title="Google" href="https://www.google.com/">
6+
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1330438">
7+
<link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency">
8+
<link rel="match" href="opacity-animation-ending-correctly-001-ref.html">
9+
10+
<style>
11+
#test {
12+
position: sticky;
13+
top: 0;
14+
height: 50px;
15+
background: blue;
16+
transition: opacity 50ms step-start;
17+
}
18+
19+
#test.fade {
20+
opacity: 0.2;
21+
}
22+
23+
.tall {
24+
height: 5000px;
25+
}
26+
</style>
27+
28+
<div id="test">
29+
</div>
30+
<div class="tall">
31+
</div>
32+
33+
<script>
34+
function flushStyleLayoutAndPrePaint() {
35+
document.elementFromPoint(10, 10);
36+
}
37+
38+
document.getElementById("test").addEventListener("transitionend", function(e) {
39+
document.documentElement.classList.remove("reftest-wait");
40+
});
41+
requestAnimationFrame(function() {
42+
flushStyleLayoutAndPrePaint();
43+
requestAnimationFrame(function() {
44+
document.getElementById("test").classList.add("fade");
45+
flushStyleLayoutAndPrePaint();
46+
});
47+
});
48+
</script>

‎css/css-color/animation/opacity-animation-ending-correctly-002.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE HTML>
2+
<html class="reftest-wait">
3+
<title>CSS Test (Color): ending of opacity animation</title>
4+
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
5+
<link rel="author" title="Google" href="https://www.google.com/">
6+
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1330438">
7+
<link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency">
8+
<link rel="match" href="opacity-animation-ending-correctly-001-ref.html">
9+
10+
<style>
11+
#test {
12+
position: sticky;
13+
top: 0;
14+
height: 50px;
15+
background: blue;
16+
transform: translate(0);
17+
filter: grayscale(0%);
18+
transition: opacity 50ms step-start;
19+
}
20+
21+
#test.fade {
22+
opacity: 0.2;
23+
}
24+
25+
.tall {
26+
height: 5000px;
27+
}
28+
</style>
29+
30+
<div id="test">
31+
</div>
32+
<div class="tall">
33+
</div>
34+
35+
<script>
36+
function flushStyleLayoutAndPrePaint() {
37+
document.elementFromPoint(10, 10);
38+
}
39+
40+
document.getElementById("test").addEventListener("transitionend", function(e) {
41+
document.documentElement.classList.remove("reftest-wait");
42+
});
43+
requestAnimationFrame(function() {
44+
flushStyleLayoutAndPrePaint();
45+
requestAnimationFrame(function() {
46+
document.getElementById("test").classList.add("fade");
47+
flushStyleLayoutAndPrePaint();
48+
});
49+
});
50+
</script>

0 commit comments

Comments
 (0)