Fix bleed-avoidance computation for border-image

BoxDecorationData::ComputeBleedAvoidance() did not take border image outsets into consideration, which meant that the "clip" strategy could be used - clipping the border image. Don't do any bleed-avoidance if there's either a border radius set or if the border image outsets are non-zero. Fixed: 378404999 Change-Id: I958e5cf045bdf560efd1a72ed8d62d17932b23be Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6010901 Reviewed-by: Stephen Chenney <[email protected]> Commit-Queue: Stephen Chenney <[email protected]> Auto-Submit: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/main@{#1382422}
web-platform-tests · Nov 13, 2024 · 45e1371 · 45e1371
1 parent d40ae37
commit 45e1371
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/css/css-backgrounds/border-image-021.html b/css/css-backgrounds/border-image-021.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>border-image w/ border radius</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-images">
+<link rel="help" href="https://issues.chromium.org/378404999">
+<link rel="match" href="reference/ref-filled-green-100px-square.xht">
+<style>
+  #target {
+    width: 100px;
+    height: 100px;
+    background: conic-gradient(rgba(255, 0, 0, 0.5) 0 0), conic-gradient(red 0 0);
+    border-radius: 40px;
+    border-image: conic-gradient(green 0 0) 1 fill / 10px;
+  }
+  #back {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="back">
+  <div id="target"></div>
+</div>
diff --git a/css/css-backgrounds/border-image-outset-004.html b/css/css-backgrounds/border-image-outset-004.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>border-image w/ non-zero outsets</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-images">
+<link rel="help" href="https://issues.chromium.org/378404999">
+<link rel="match" href="reference/ref-filled-green-100px-square.xht">
+<style>
+  #target {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 80px;
+    height: 80px;
+    background: conic-gradient(rgba(255, 0, 0, 0.5) 0 0), conic-gradient(red 0 0);
+    border-image: conic-gradient(green 0 0) 1 fill / 10px / 10px;
+  }
+  #back {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="back">
+  <img id="target" src="support/green_color.png">
+</div>