Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FloatRoundedRect::OutsetForShapeMargin()
It's different from Outset() in that it can make sharp corners (radius=0) rounded (radius=shape_margin). This conforms to the spec [1]: This defines a new shape that is the smallest contour (in the shrink-wrap sense) that includes all the points that are the shape-margin distance outward in the perpendicular direction from a point on the underlying shape. [1] https://drafts.csswg.org/css-shapes/#shape-margin-property Bug: 1305037 Change-Id: Iaafae94209a5413d0718076919c570a135f66ac1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3516733 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#984242}
- Loading branch information
1 parent
ee2175f
commit 50f523f
Showing
11 changed files
with
313 additions
and
26 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
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
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
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
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
11 changes: 11 additions & 0 deletions
11
...t/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html
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,11 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| #shape { | ||
| margin-left: 25px; | ||
| width: 200px; | ||
| height: 200px; | ||
| background-color: green; | ||
| } | ||
| </style> | ||
| <p>The test passes if there is a green square and no red.</p> | ||
| <div id="shape"></div> |
54 changes: 54 additions & 0 deletions
54
...sts/external/wpt/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html
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,54 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSS Test: right float, shape-outside:border-box and shape-margin</title> | ||
| <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> | ||
| <link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> | ||
| <meta name="flags" content="ahem" /> | ||
| <meta name="assert" content="The test verfies a shape with shape-outside:border-box | ||
| and shape-margin has rounded corners."> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| <style> | ||
| #container { | ||
| position: relative; | ||
| width: 200px; | ||
| height: 200px; | ||
| overflow: hidden; | ||
| margin-left: 25px; | ||
| } | ||
| #test-container { | ||
| /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ | ||
| margin-left: -30px; | ||
| width: 230px; | ||
| height: 200px; | ||
| font: 20px/1 Ahem; | ||
| background-color: red; | ||
| color: green; | ||
| text-align: right; | ||
| } | ||
| #test-shape { | ||
| float: right; | ||
| width: 15px; | ||
| height: 10px; | ||
| margin: 95px 65px 95px 120px; | ||
| shape-margin: 70px; | ||
| shape-outside: border-box; | ||
| } | ||
| #static-shape { | ||
| position: absolute; | ||
| left: 50px; | ||
| top: 20px; | ||
| width: 150px; | ||
| height: 160px; | ||
| background-color: green; | ||
| } | ||
| </style> | ||
| <p>The test passes if there is a green square and no red.</p> | ||
| <div id="container"> | ||
| <div id="test-container"> | ||
| <div id="test-shape"></div> | ||
| XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX | ||
| <div id="static-shape"></div> | ||
| </div> | ||
| </div> |
56 changes: 56 additions & 0 deletions
56
...ts/external/wpt/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html
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,56 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSS Test: right float, shape-outside:content-box and shape-margin</title> | ||
| <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> | ||
| <link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> | ||
| <meta name="flags" content="ahem" /> | ||
| <meta name="assert" content="The test verfies a shape with shape-outside:content-box | ||
| and shape-margin has rounded corners."> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| <style> | ||
| #container { | ||
| position: relative; | ||
| width: 200px; | ||
| height: 200px; | ||
| overflow: hidden; | ||
| margin-left: 25px; | ||
| } | ||
| #test-container { | ||
| /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ | ||
| margin-left: -30px; | ||
| width: 230px; | ||
| height: 200px; | ||
| font: 20px/1 Ahem; | ||
| color: green; | ||
| background-color: red; | ||
| text-align: right; | ||
| } | ||
| #test-shape { | ||
| margin-left: 30px; | ||
| float: right; | ||
| box-sizing: border-box; | ||
| width: 200px; | ||
| height: 200px; | ||
| padding: 95px 40px 95px 120px; | ||
| shape-margin: 70px; | ||
| shape-outside: content-box; | ||
| } | ||
| #static-shape { | ||
| position: absolute; | ||
| left: 50px; | ||
| top: 20px; | ||
| width: 150px; | ||
| height: 160px; | ||
| background-color: green; | ||
| } | ||
| </style> | ||
| <p>The test passes if there is a green square and no red.</p> | ||
| <div id="container"> | ||
| <div id="test-container"> | ||
| <div id="test-shape"></div> | ||
| XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX | ||
| <div id="static-shape"></div> | ||
| </div> | ||
| </div> |
58 changes: 58 additions & 0 deletions
58
...ts/external/wpt/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html
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,58 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSS Test: right float, shape-outside:padding-box and shape-margin</title> | ||
| <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> | ||
| <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> | ||
| <link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> | ||
| <meta name="flags" content="ahem" /> | ||
| <meta name="assert" content="The test verfies a shape with shape-outside:padding-box | ||
| and shape-margin has rounded corners."> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| <style> | ||
| #container { | ||
| position: relative; | ||
| width: 200px; | ||
| height: 200px; | ||
| overflow: hidden; | ||
| margin-left: 25px; | ||
| } | ||
| #test-container { | ||
| /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ | ||
| margin-left: -30px; | ||
| width: 230px; | ||
| height: 200px; | ||
| font: 20px/1 Ahem; | ||
| background-color: red; | ||
| color: green; | ||
| text-align: right; | ||
| } | ||
| #test-shape { | ||
| margin-left: 30px; | ||
| float: right; | ||
| box-sizing: border-box; | ||
| width: 200px; | ||
| height: 200px; | ||
| border-width: 95px 40px 95px 120px; | ||
| border-style: solid; | ||
| border-color: transparent; | ||
| shape-margin: 70px; | ||
| shape-outside: padding-box; | ||
| } | ||
| #static-shape { | ||
| position: absolute; | ||
| left: 50px; | ||
| top: 20px; | ||
| width: 150px; | ||
| height: 160px; | ||
| background-color: green; | ||
| } | ||
| </style> | ||
| <p>The test passes if there is a green square and no red.</p> | ||
| <div id="container"> | ||
| <div id="test-container"> | ||
| <div id="test-shape"></div> | ||
| XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX | ||
| <div id="static-shape"></div> | ||
| </div> | ||
| </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
Oops, something went wrong.