Set contents_opaque(false) if the background color is transparent

Previously if a layer's background was transparent and the layer is opaque, we used the layer_tree_host's background as SafeOpaqueBackgroundColor(). However, the color might be dramatically different from the normal color in the layer, causing edge artifacts. Now set contents_opaque(false) in the case. The case of opaque layer not having a background color only happens in cases such as the layer has an opaque background image. In such cases, using any heuristic color as the SafeOpaqueBackgroundColor() may be inappropriate because the color may be visibly different from the background image. This also prevents seams between adjacent image layers when the layers layer have non-integral to-screen transforms. Bug: 1330509 Change-Id: I91edeb1c02da5eaa38ea0431f0559775b273f418
web-platform-tests · Jul 22, 2022 · 85742f8 · 85742f8
1 parent a2871e4
commit 85742f8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html b/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body style="margin: 0">
+Should be fully white, without any red.
+</body>
diff --git a/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html b/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1330509">
+<link rel="match" href="fractional-scale-gradient-bg-obscure-red-bg-ref.html">
+<style>
+  body {
+    background: red;
+    margin: 0;
+  }
+  .container {
+    width: 100vw;
+    height: 100vh;
+    background: white;
+  }
+  .transform {
+    transform-origin: 0 0;
+    will-change: transform;
+    background: linear-gradient(white, white);
+    width: 47px;
+    height: 47px;
+    position: absolute;
+  }
+</style>
+<div class="container">
+  Should be fully white, without any red.
+  <div class="transform" style="transform: scale(3.777)"></div>
+  <div class="transform" style="transform: scale(2.777)"></div>
+  <div class="transform" style="transform: scale(1.777)"></div>
+  <div class="transform" style="transform: scale(1.129)"></div>
+  <div class="transform" style="transform: scale(0.971)"></div>
+  <div class="transform" style="transform: scale(0.457)"></div>
+</div>