forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Do not round the clipping region with mixed overflow clip
The CSSWG resolved [1] to not apply rounded border clipping when one of overflow-x or overflow-y computes to clip and the other computes to visible (https://drafts.csswg.org/css-overflow/#corner-clipping). This patch updates our implementation to not create the inner border radius clip in this mixed clip/visible scenario. [1] w3c/csswg-drafts#7434 Bug: 1416649 Change-Id: I4d24ac82ecdafba5fa691efb1ce85892c734c717 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5171405 Reviewed-by: David Baron <[email protected]> Commit-Queue: Philip Rogers <[email protected]> Cr-Commit-Position: refs/heads/main@{#1243240}
- Loading branch information
1 parent
cbc4429
commit 7e7527c
Showing
4 changed files
with
113 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .box { | ||
| width: 100px; | ||
| height: 100px; | ||
| background: green; | ||
| display: inline-block; | ||
| } | ||
| </style> | ||
|
|
||
| There should be 4 100x100 green squares (no rounded corners) below.<br> | ||
| <div class="box"></div> | ||
| <div class="box"></div> | ||
| <div class="box"></div> | ||
| <div class="box"></div> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!DOCTYPE html> | ||
| <title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> | ||
| <link rel="match" href="rounded-overflow-clip-visible-ref.html"> | ||
| <style> | ||
| .container { | ||
| width: 100px; | ||
| height: 50px; | ||
| overflow: clip visible; | ||
| background: red; | ||
| display: inline-block; | ||
| } | ||
| .border-radius { | ||
| border-radius: 25px; | ||
| } | ||
| .child { | ||
| width: 200px; | ||
| height: 100px; | ||
| background: green; | ||
| fill: green; | ||
| } | ||
| </style> | ||
|
|
||
| There should be 4 100x100 green squares (no rounded corners) below.<br> | ||
| <div class="container border-radius"> | ||
| <div class="child"></div> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <div class="child"></div> | ||
| </div> | ||
|
|
||
| <svg class="container border-radius"> | ||
| <rect class="child"></rect> | ||
| </svg> | ||
|
|
||
| <svg class="container"> | ||
| <rect class="child"></rect> | ||
| </svg> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .box { | ||
| width: 100px; | ||
| height: 100px; | ||
| background: green; | ||
| display: inline-block; | ||
| } | ||
| </style> | ||
|
|
||
| There should be 4 100x100 green squares (no rounded corners) below.<br> | ||
| <div class="box"></div> | ||
| <br> | ||
| <div class="box"></div> | ||
| <br> | ||
| <div class="box"></div> | ||
| <br> | ||
| <div class="box"></div> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!DOCTYPE html> | ||
| <title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> | ||
| <link rel="match" href="rounded-overflow-visible-clip-ref.html"> | ||
| <style> | ||
| .container { | ||
| width: 50px; | ||
| height: 100px; | ||
| overflow: visible clip; | ||
| background: red; | ||
| display: inline-block; | ||
| } | ||
| .border-radius { | ||
| border-radius: 25px; | ||
| } | ||
| .child { | ||
| width: 100px; | ||
| height: 200px; | ||
| background: green; | ||
| fill: green; | ||
| } | ||
| </style> | ||
|
|
||
| There should be 4 100x100 green squares (no rounded corners) below.<br> | ||
| <div class="container border-radius"> | ||
| <div class="child"></div> | ||
| </div> | ||
| <br> | ||
| <div class="container"> | ||
| <div class="child"></div> | ||
| </div> | ||
| <br> | ||
| <svg class="container border-radius"> | ||
| <rect class="child"></rect> | ||
| </svg> | ||
| <br> | ||
| <svg class="container"> | ||
| <rect class="child"></rect> | ||
| </svg> |