-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Snap Border and Outline Widths before Layout
Chrome renders a 1 pixel gap between a parent's border and a child's background, when a sub pixel borders widths decimal value is greater than or equal to 0.5. This happens because * the parent's size gets calculated at layout time with the sub pixel values * the child's position gets calculated based on the parent's position and size * the border width gets floored at paint time to just the whole value This leaves a 1 pixel gap between the last pixel in the parent's border and the first pixel in the child's background. This behavior is a regression introduced in: https://chromium-review.googlesource.com/c/chromium/src/+/2199140 Which changed Chrome to "Use floor instead of round for decimal border widths" with the intent to increase interop with Firefox and Safari which both floor borders. Previously Chrome was rounding the borders at Paint time, avoiding the gaps between a parent's border and a child's background. The proposed fix is to snap (floor) the borders widths before layout, matching what Gecko and WebKit do. Outline widths also use `ConvertBorderWidth` as their conversion function and will also be snapped before layout. CSS isses: w3c/csswg-drafts#5210 w3c/csswg-drafts#7473 R=pdr Change-Id: Ib32ba28e4f193ba79f90f96771378abaf0c589a8 Bug: 1120347, 1201762
- Loading branch information
1 parent
a63431f
commit 6cf72c1
Showing
9 changed files
with
377 additions
and
5 deletions.
There are no files selected for viewing
48 changes: 48 additions & 0 deletions
48
css/css-borders/border-width-computed-value.tentative.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,48 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title> | ||
| CSS Border: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width"> | ||
| <link rel="match" href="reference/border-width-computed-value-ref.tentative.html"> | ||
|
|
||
| <meta name="assert" content="border-width computed value after rounding."> | ||
|
|
||
| <style> | ||
| .square { | ||
| height: 20px; | ||
| width: 20px; | ||
| border: solid gray; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if border widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="square" style="border-width: 0.3px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 0.5px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 0.9px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 1.3px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 1.5px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 1.9px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3.3px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3.5px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3.9px;"></div> | ||
| </body> | ||
| </html> |
94 changes: 94 additions & 0 deletions
94
css/css-borders/column-rule-width-computed-value.tentative.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,94 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title> | ||
| CSS Column-Rule: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#crw"> | ||
| <link rel="match" href="reference/column-rule-width-computed-value-ref.tentative.html"> | ||
|
|
||
| <meta name="assert" content="column-rule-width computed value after rounding."> | ||
|
|
||
| <style> | ||
| .columns { | ||
| column-count: 2; | ||
| column-rule: solid gray; | ||
| width: 420px; | ||
| height: 50px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if column rule widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="columns" style="column-rule-width: 0.3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 0.5px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 0.9px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 1.3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 1.5px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 1.9px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3.3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3.5px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3.9px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
| </body> | ||
| </html> |
48 changes: 48 additions & 0 deletions
48
css/css-borders/outline-width-computed-value.tentative.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,48 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title> | ||
| CSS Outline: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-ui-4/#outline-width"> | ||
| <link rel="match" href="reference/outline-width-computed-value-ref.tentative.html"> | ||
|
|
||
| <meta name="assert" content="outline-width computed value after rounding."> | ||
|
|
||
| <style> | ||
| .square { | ||
| height: 20px; | ||
| width: 20px; | ||
| outline: solid gray; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if outline widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="square" style="outline-width: 0.3px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 0.5px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 0.9px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 1.3px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 1.5px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 1.9px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3.3px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3.5px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3.9px;"></div> | ||
| </body> | ||
| </html> |
44 changes: 44 additions & 0 deletions
44
css/css-borders/reference/border-width-computed-value-ref.tentative.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,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title> | ||
| CSS Border: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
|
|
||
| <style> | ||
| .square { | ||
| height: 20px; | ||
| width: 20px; | ||
| border: 1px solid gray; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if border widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3px;"></div> | ||
| <br> | ||
| <div class="square" style="border-width: 3px;"></div> | ||
| </body> | ||
| </html> |
92 changes: 92 additions & 0 deletions
92
css/css-borders/reference/column-rule-width-computed-value-ref.tentative.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,92 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title> | ||
| CSS Column-Rule: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
|
|
||
| <style> | ||
| .columns { | ||
| column-count: 2; | ||
| column-rule: 1px solid gray; | ||
| width: 420px; | ||
| height: 50px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if column rule widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
|
|
||
| <div class="columns" style="column-rule-width: 3px;"> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipisicing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
44 changes: 44 additions & 0 deletions
44
css/css-borders/reference/outline-width-computed-value-ref.tentative.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,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title> | ||
| CSS Outline: width computed value | ||
| </title> | ||
|
|
||
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> | ||
|
|
||
| <style> | ||
| .square { | ||
| height: 20px; | ||
| width: 20px; | ||
| outline: 1px solid gray; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1> | ||
| Test passes if outline widths are rounded up | ||
| when they are greater than 0 and less than 1, | ||
| and rounded down when they are greater than 1. | ||
| </h1> | ||
|
|
||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3px;"></div> | ||
| <br> | ||
| <div class="square" style="outline-width: 3px;"></div> | ||
| </body> | ||
| </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
Oops, something went wrong.