[css-borders-4] Refactor contour path algorithm #13173
Open
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
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
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}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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