[css-borders-4] Refactor contour path algorithm #13173
Open
+138
−85
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Dec 4, 2025
As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a
brave-builds
pushed a commit
to brave/chromium
that referenced
this pull request
Dec 4, 2025
As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1554276}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Dec 4, 2025
As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1554276}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Dec 5, 2025
As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1554276}
lando-prod-mozilla bot
pushed a commit
to mozilla-firefox/firefox
that referenced
this pull request
Dec 11, 2025
…ing, a=testonly Automatic update from web-platform-tests Fix corner-shape shadow & outline rendering As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1554276} -- wpt-commits: c37199cbb0213e61f2aa1e9d53c2479ff7ab8a22 wpt-pr: 56503
i3roly
pushed a commit
to i3roly/firefox-dynasty
that referenced
this pull request
Dec 15, 2025
…ing, a=testonly Automatic update from web-platform-tests Fix corner-shape shadow & outline rendering As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1554276} -- wpt-commits: c37199cbb0213e61f2aa1e9d53c2479ff7ab8a22 wpt-pr: 56503
SebastianZ
requested changes
Dec 16, 2025
Contributor
SebastianZ
left a comment
SebastianZ
left a comment
There was a problem hiding this comment.
@noamr I admit, it's still a little hard for me to read algorithms in the specs, so I basically trust you on the outlined steps, as you also did the experimental implementation.
Anyway, I did my best to read through it and provide feedback.
Use vector math to better describe how to draw a border-align contour. Also use the miter points (which are the axisAlignedCornerStart/End points) to make sure shadows are rendered in a border-aligned manner. Closes w3c#13037
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
Co-authored-by: Sebastian Zartner <[email protected]>
noamr
force-pushed
the
corner-shape-shadow
branch
from
4f77ee8 to
a717599
Compare
Collaborator
Author
Thanks, all fixes applied! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Use vector math to better describe how to draw a border-align contour. Also use the miter points (which are the axisAlignedCornerStart/End points) to make sure shadows are rendered in a border-aligned manner.
Closes #13037