commit 303ca09db38d89d3f33532454a4be474c27ad397 parent ac2f72e530e0cd2737dd142e957566265bf22d73 Author: Daniil Sakhapov <sakhapov@chromium.org> Date: Fri, 31 Oct 2025 08:58:00 +0000 Bug 1997005 [wpt PR 55742] - Compute stroke from the first not none border property in logical order, a=testonly Automatic update from web-platform-tests Compute stroke from the first not none border property in logical order Compute the derived stroke thickness and color from the first renderable logical border side (block-start, inline-start, block-end, inline-end) according to https://drafts.csswg.org/css-borders-4/#relevant-side-for-border-shape. When two <basic-shape> values are given, the border is rendered as the shape between the two paths. When only a single <basic-shape> is given, the border is rendered as a stroke with the relevant side’s computed border width as the stroke width. The fill color of border is the relevant side’s computed border-color. This CL also removes the use of fill and stroke properties. Bug: 448653232 Change-Id: Iff2f592a7cd0d413a55f6ef62fefd308967a9fb1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7072931 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1537333} -- wpt-commits: e27546d42fe93f9ac8c14c7da07b459f98df7d9e wpt-pr: 55742 Diffstat:
16 files changed, 160 insertions(+), 104 deletions(-)
diff --git a/testing/web-platform/tests/css/css-borders/border-shape-absolute-coords-shape-ref.tentative.html b/testing/web-platform/tests/css/css-borders/border-shape-absolute-coords-shape-ref.tentative.html @@ -1,7 +1,5 @@ <!DOCTYPE html> <style> - @import "resources/stroke-variants.css"; - svg { position: absolute; top: 200px; @@ -12,8 +10,9 @@ stroke: purple; stroke-width: 20px; fill: green; + border: 20px solid transparent; } </style> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> - <polygon points="0,0 200,0, 100,200" /> + <polygon points="6,0 194,0, 100,188" /> </svg> diff --git a/testing/web-platform/tests/css/css-borders/border-shape-absolute-coords-shape.tentative.html b/testing/web-platform/tests/css/css-borders/border-shape-absolute-coords-shape.tentative.html @@ -3,6 +3,7 @@ <link rel="help" href="https://www.w3.org/TR/css-borders-4/#propdef-border-shape"> <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shape-function"> <link rel="match" href="border-shape-absolute-coords-shape-ref.tentative.html"> +<meta name="fuzzy" content="maxDifference=0-70;totalPixels=0-1200"> <style> .bs-target { position: absolute; @@ -11,8 +12,7 @@ width: 200px; height: 200px; border-shape: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close); - stroke: purple; - stroke-width: 20px; + border: 20px solid purple; background: green; } </style> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-clips-background-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-clips-background-ref.html @@ -5,14 +5,15 @@ svg { width: 100px; height: 100px; overflow: visible; + border: 10px solid transparent; } -polygon { +circle { stroke: purple; stroke-width: 10px; fill: green; } </style> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <polygon points="50,0 100,50, 50,100, 0,50" /> + <circle cx="50" cy="50" r="50" /> </svg> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-clips-background.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-clips-background.html @@ -1,14 +1,13 @@ <!DOCTYPE html> <link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> <link rel="match" href="border-shape-clips-background-ref.html"> -<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-128"> +<meta name="fuzzy" content="maxDifference=0-110;totalPixels=0-200"> <style> #target { width: 100px; height: 100px; - border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - stroke: purple; - stroke-width: 10px; + border-shape: circle(); + border: 10px solid purple; background: green; border-radius: 10px; } diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html @@ -31,7 +31,6 @@ svg { <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"> <rect width="160" height="160" fill="yellow" /> - <rect x="10" y="10" width="140" height="140" fill="thistle" /> <rect x="20" y="20" width="120" height="120" fill="palegoldenrod" /> <rect x="30" y="30" width="100" height="100" fill="lightblue" /> </svg> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box.html @@ -16,8 +16,7 @@ body { background: thistle; padding: 10px; margin: 10px; - border: 10px solid black; - fill: palegoldenrod; + border: 10px solid palegoldenrod; } .contents { width: 100%; diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-inner-outer-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-inner-outer-ref.html @@ -7,11 +7,6 @@ svg { overflow: visible; } -polygon, circle { - stroke: purple; - stroke-width: 3px; -} - polygon { fill: yellow; } diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-inner-outer.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-inner-outer.html @@ -1,16 +1,14 @@ <!DOCTYPE html> <link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> <link rel="match" href="border-shape-inner-outer-ref.html"> -<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-128"> +<meta name="fuzzy" content="maxDifference=0-170;totalPixels=0-130"> <style> #target { width: 100px; height: 100px; border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) circle(20%); - stroke: purple; - stroke-width: 3px; + border-color: yellow; background: green; - fill: yellow; border-radius: 10px; } </style> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-overflow-stroke.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-overflow-stroke.html @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> -<link rel="match" href="border-shape-clips-background-ref.html"> -<meta name="fuzzy" content="maxDifference=0-96;totalPixels=0-256"> -<style> -#target { - width: 100px; - height: 100px; - border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - stroke: purple; - stroke-width: 10px; - border-radius: 10px; - position: relative; - overflow: hidden; -} -#inner { - background: green; - position: absolute; - inset: 0; -} -</style> -<div id="target"> - <div id="inner"></div> -</div> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-shadow-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-shadow-ref.html @@ -7,6 +7,8 @@ svg { width: 200px; height: 200px; + overflow: visible; + border: 2px solid transparent; } .shadow { fill: purple; @@ -21,6 +23,6 @@ </style> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> - <polygon points="70,10 130,60, 70,110, 10,60" class="shadow" /> - <polygon points="70,10 130,60, 70,110, 10,60" class="target" /> + <polygon points="100,0 200,100, 100,200, 0,100" class="shadow" /> + <polygon points="100,0 200,100, 100,200, 0,100" class="target" /> </svg> \ No newline at end of file diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-shadow.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-shadow.html @@ -1,21 +1,19 @@ <!DOCTYPE html> <link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> <link rel="match" href="border-shape-shadow-ref.html"> -<meta name="fuzzy" content="maxDifference=0-96;totalPixels=0-256"> +<meta name="fuzzy" content="maxDifference=0-110;totalPixels=0-2500"> <style> body { margin: 0; } #target { - margin: 10px; - width: 120px; - height: 100px; + width: 200px; + height: 200px; border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); position: relative; background: green; box-shadow: 10px 20px 0 0px purple; - stroke: black; - stroke-width: 2px; + border: 2px solid black; } </style> <div id="target"> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-from-border-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-from-border-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<title>Reference for border-shape stroke derived from logical border sides</title> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> +<style> +body { + margin: 0; +} +.container { + display: flex; + gap: 32px; + padding: 20px; +} +.target { + width: 120px; + height: 120px; + overflow: visible; + box-sizing: padding-box; +} +.case1 { + border-width: 18px 10px 4px 6px; + border-color: transparent; + border-style: solid; +} +.case2 { + writing-mode: vertical-rl; + border-width: 18px 10px 4px 6px; + border-color: transparent; + border-style: solid; +} +.case3 { + writing-mode: vertical-rl; + border-width: 18px 10px 4px 0px; + border-color: transparent; + border-style: solid; +} +.case4 { + writing-mode: vertical-lr; + border-width: 18px 10px 4px 0px; + border-color: transparent; + border-style: solid; +} +</style> +<div class="container"> + <svg class="target case1" viewBox="0 0 120 120"> + <circle cx="59" cy="51" r="36" fill="none" stroke="rgb(220, 0, 0)" stroke-width="18"/> + </svg> + <svg class="target case2" viewBox="0 0 120 120"> + <circle cx="59" cy="51" r="42" fill="none" stroke="rgb(0, 0, 220)" stroke-width="6"/> + </svg> + <svg class="target case3" viewBox="0 0 120 120"> + <circle cx="65" cy="51" r="36" fill="none" stroke="rgb(220, 0, 0)" stroke-width="18"/> + </svg> + <svg class="target case4" viewBox="0 0 120 120"> + <circle cx="65" cy="51" r="40" fill="none" stroke="rgb(0, 140, 0)" stroke-width="10"/> + </svg> +</div> +<div class="container"> + <svg class="target double-shape case1" viewBox="0 0 120 120"> + <circle cx="54" cy="42" r="72.5" fill="rgb(220, 0, 0)" stroke="rgb(220, 0, 0)" stroke-width="55"/> + <circle cx="64" cy="60" r="45" fill="white"/> + </svg> + <svg class="target double-shape case2" viewBox="0 0 120 120"> + <circle cx="54" cy="42" r="72.5" fill="rgb(0, 0, 220)" stroke="rgb(0, 0, 220)" stroke-width="55"/> + <circle cx="64" cy="60" r="45" fill="white"/> + </svg> + <svg class="target double-shape case3" viewBox="0 0 120 120"> + <circle cx="60" cy="42" r="72.5" fill="rgb(220, 0, 0)" stroke="rgb(220, 0, 0)" stroke-width="55"/> + <circle cx="70" cy="60" r="45" fill="white"/> + </svg> + <svg class="target double-shape case4" viewBox="0 0 120 120"> + <circle cx="60" cy="42" r="72.5" fill="rgb(0, 140, 0)" stroke="rgb(0, 140, 0)" stroke-width="55"/> + <circle cx="70" cy="60" r="45" fill="white"/> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-from-border.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-from-border.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title>CSS Borders Test: border-shape takes stroke from relevant border side</title> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#relevant-side-for-border-shape"> +<link rel="match" href="border-shape-stroke-from-border-ref.html"> +<meta name="assert" content="When border-shape provides a single shape without an explicit stroke, the stroke width and color follow the first renderable logical border side (block-start, inline-start, block-end, inline-end)."> +<meta name="fuzzy" content="maxDifference=0-70;totalPixels=0-3500"> +<style> +body { + margin: 0; +} +.container { + display: flex; + gap: 32px; + padding: 20px; +} +.target { + width: 120px; + height: 120px; +} +.single-shape { + border-shape: circle(45px at 60px 60px); +} +.double-shape { + border-shape: circle(100px at 60px 60px) circle(45px at 60px 60px); +} +.case1 { + border-top: 18px solid rgb(220, 0, 0); + border-left: 10px solid rgb(0, 140, 0); + border-bottom: 4px solid rgb(200, 200, 0); + border-right: 6px solid rgb(0, 0, 220); +} +.case2 { + writing-mode: vertical-rl; + border-top: 18px solid rgb(220, 0, 0); + border-left: 10px solid rgb(0, 140, 0); + border-bottom: 4px solid rgb(200, 200, 0); + border-right: 6px solid rgb(0, 0, 220); +} +.case3 { + writing-mode: vertical-rl; + border-top: 18px solid rgb(220, 0, 0); + border-left: 10px solid rgb(0, 140, 0); + border-bottom: 4px solid rgb(200, 200, 0); + border-right: none; +} +.case4 { + writing-mode: vertical-lr; + border-top: 18px solid rgb(220, 0, 0); + border-left: 10px solid rgb(0, 140, 0); + border-bottom: 4px solid rgb(200, 200, 0); + border-right: none; +} +</style> +<div class="container"> + <div class="target single-shape case1"></div> + <div class="target single-shape case2"></div> + <div class="target single-shape case3"></div> + <div class="target single-shape case4"></div> +</div> +<div class="container"> + <div class="target double-shape case1"></div> + <div class="target double-shape case2"></div> + <div class="target double-shape case3"></div> + <div class="target double-shape case4"></div> +</div> diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke-ref.html @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> -<style> -@import "resources/stroke-variants.css"; - -svg { - width: 100px; - height: 100px; - overflow: visible; -} - -svg, circle { - fill: white; - stroke: purple; -} -</style> -<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <polygon points="50,0 100,50, 50,100, 0,50" /> -</svg> -<script> - document.querySelector("polygon").classList.add(new URLSearchParams(location.search).get("class")); -</script> -</div> -\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-stroke.html @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape"> -<link rel="match" href="border-shape-stroke-ref.html"> -<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-128"> -<meta name="variant" content="?class=solid"> -<meta name="variant" content="?class=percent"> -<meta name="variant" content="?class=roundjoin"> -<meta name="variant" content="?class=beveljoin"> -<meta name="variant" content="?class=nostroke"> -<style> -@import "resources/stroke-variants.css"; - -#target { - width: 100px; - height: 100px; - border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - stroke: purple; -} -</style> -<div id="target"></div> -<script> - document.querySelector("#target").classList.add(new URLSearchParams(location.search).get("class")); -</script> -\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/resources/stroke-variants.css b/testing/web-platform/tests/css/css-borders/tentative/border-shape/resources/stroke-variants.css @@ -16,7 +16,6 @@ stroke-linejoin: bevel; } - .nostroke { stroke-width: 0; } \ No newline at end of file