commit 5a54a77f7b3e2023a7d1a617680618bdec91b11b parent 9ad27e0ee4902381f18124f0a03f0085471d4e76 Author: Oriol Brufau <obrufau@igalia.com> Date: Thu, 9 Oct 2025 20:31:38 +0000 Bug 1992122 [wpt PR 55139] - layout: Avoid negative corner radii values for border-radius, a=testonly Automatic update from web-platform-tests layout: Avoid negative corner radii values The `border-radius` property provides the radii for the border box. For the curvature of the padding and content boxes, we then subtract the border and padding sizes. However, we weren't flooring the result by zero, which could make the background completely disappear when using `background-clip: padding-box` or `background-clip: content-box`. Signed-off-by: Oriol Brufau <obrufau@igalia.com> -- wpt-commits: a775d52af094c0c1bc41eacab0a1e9d9ac19bca8 wpt-pr: 55139 Diffstat:
8 files changed, 120 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-002.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: background-clip: content-box with border-radius</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping"> +<link rel="help" href="https://github.com/servo/servo/issues/39540"> +<link rel="match" href="reference/background-clip-content-box-with-border-radius-002-ref.html"> +<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400"> +<meta name="assert" content="Backgrounds clipped to the content box should follow the content box curve, which should be equal to the outer border radius minus the corresponding border+padding thickness."> + +<div style=" + width: 50px; + height: 50px; + border: 25px solid black; + border-radius: 100% 0 0 0; + background-color: black; + background-clip: content-box; +"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: background-clip: content-box with border-radius</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping"> +<link rel="help" href="https://github.com/servo/servo/issues/39540"> +<link rel="match" href="reference/background-clip-content-box-with-border-radius-003-ref.html"> +<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400"> +<meta name="assert" content="Backgrounds clipped to the content box should follow the content box curve, which should be equal to the outer border radius minus the corresponding border+padding thickness."> + +<div style=" + width: 100px; + height: 100px; + padding: 25px; + border: 25px solid transparent; + border-radius: 100% 0 0 0; + background-color: black; + background-clip: content-box; +"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-002.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping"> +<link rel="help" href="https://github.com/servo/servo/issues/39540"> +<link rel="match" href="reference/background-clip-padding-box-with-border-radius-002-ref.html"> +<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400"> +<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness."> + +<div style=" + width: 20px; + height: 20px; + padding: 20px; + border: 20px solid black; + border-radius: 100% 0 0 0; + background-color: black; + background-clip: padding-box; +"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html b/testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping"> +<link rel="help" href="https://github.com/servo/servo/issues/39540"> +<link rel="match" href="reference/background-clip-padding-box-with-border-radius-003-ref.html"> +<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400"> +<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness."> + +<div style=" + width: 50px; + height: 50px; + padding: 25px; + border: 25px solid transparent; + border-radius: 100% 0 0 0; + background-color: black; + background-clip: padding-box; +"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference File</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> + +<div style="width: 100px; height: 100px; overflow: hidden"> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: black;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference File</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> + +<div style=" + width: 100px; + height: 100px; + border: 50px solid white; + border-top-left-radius: 100%; + background-color: black; +"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference File</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> + +<div style="width: 100px; height: 100px; overflow: hidden"> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: black;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference File</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> + +<div style=" + width: 50px; + height: 50px; + padding: 25px; + border: 25px solid white; + border-top-left-radius: 100%; + background-color: black; +"></div>