commit 49af6e7c16cf432eddcbf5a18f7db5cb1284bced
parent 6f2afc84040eda3c85a4202ef7d0dfe8f85bf6cd
Author: Kevin Ellis <kevers@google.com>
Date: Mon, 27 Oct 2025 10:06:44 +0000
Bug 1996075 [wpt PR 55626] - Fix background-color animation when opacity != 1, a=testonly
Automatic update from web-platform-tests
Fix background-color animation when opacity != 1
Suppress paint op folding for native paint worklets since they
drop the paint op flags.
Bug: 449865091
Change-Id: I201876c19d550342fd418411fc8b8158e78bd4f3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7079149
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1534529}
--
wpt-commits: 0f2c3e8cba81482a235c12c7b06f11e4f77b0bb4
wpt-pr: 55626
Diffstat:
2 files changed, 56 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/web-animations/responsive/background-color-animation-plus-opacity-ref.html b/testing/web-platform/tests/web-animations/responsive/background-color-animation-plus-opacity-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<style>
+ #target {
+ height: 200px;
+ width: 200px;
+ position: relative;
+ background-color: rgba(128, 64, 0, 0.5);
+ }
+</style>
+<body>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/web-animations/responsive/background-color-animation-plus-opacity.html b/testing/web-platform/tests/web-animations/responsive/background-color-animation-plus-opacity.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="help" href="https://crbug.com/449865091">
+ <link rel="match" href="background-color-animation-plus-opacity-ref.html">
+ <!-- Tolerance for rounding on the color match -->
+ <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-40000">
+</head>
+<script src="/web-animations/testcommon.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<style>
+ #target {
+ height: 200px;
+ width: 200px;
+ position: relative;
+ background-color: red;
+ opacity: 0.5;
+ /* catch midpoint of transition */
+ transition: background-color 10000s -5000s cubic-bezier(0, 1, 1, 0);
+ }
+
+ #target.update {
+ background-color: green;
+ }
+</style>
+<body>
+ <div id='target'></div>
+</body>
+<script>
+ window.onload = async () => {
+ await waitForCompositorReady();
+ target.classList.add('update');
+ requestAnimationFrame(takeScreenshot);
+ };
+</script>
+</html>
