From 9e34b1fea79cf853086a636bde82d5e116cfc9de Mon Sep 17 00:00:00 2001 From: Traian Captan Date: Fri, 14 Oct 2022 17:35:34 -0700 Subject: [PATCH] Snap Border and Outline Widths before Layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: https://github.com/w3c/csswg-drafts/issues/5210 https://github.com/w3c/csswg-drafts/issues/7473 R=pdr Change-Id: Ib32ba28e4f193ba79f90f96771378abaf0c589a8 Bug: 1120347, 1201762 --- css/css-borders/border-width-rounding.html | 52 ++++++++++ .../border-width-rounding.tentative.html | 53 +++++++++++ .../subpixel-border-width-ref.tentative.html | 44 +++++++++ .../subpixel-border-width.tentative.html | 48 ++++++++++ ...pixel-column-rule-width-ref.tentative.html | 92 ++++++++++++++++++ .../subpixel-column-rule-width.tentative.html | 94 +++++++++++++++++++ css/css-outline/outline-width-rounding.html | 52 ++++++++++ .../outline-width-rounding.tentative.html | 53 +++++++++++ .../subpixel-outline-width-ref.tentative.html | 44 +++++++++ .../subpixel-outline-width.tentative.html | 48 ++++++++++ ...-collapsed-borders-003-ref.tentative.html} | 3 +- ...ixel-collapsed-borders-003.tentative.html} | 11 ++- ... => outline-width-computed.tentative.html} | 2 +- 13 files changed, 589 insertions(+), 7 deletions(-) create mode 100644 css/css-borders/border-width-rounding.html create mode 100644 css/css-borders/border-width-rounding.tentative.html create mode 100644 css/css-borders/reference/subpixel-border-width-ref.tentative.html create mode 100644 css/css-borders/subpixel-border-width.tentative.html create mode 100644 css/css-column-rule/reference/subpixel-column-rule-width-ref.tentative.html create mode 100644 css/css-column-rule/subpixel-column-rule-width.tentative.html create mode 100644 css/css-outline/outline-width-rounding.html create mode 100644 css/css-outline/outline-width-rounding.tentative.html create mode 100644 css/css-outline/reference/subpixel-outline-width-ref.tentative.html create mode 100644 css/css-outline/subpixel-outline-width.tentative.html rename css/css-tables/{subpixel-collapsed-borders-003-ref.html => subpixel-collapsed-borders-003-ref.tentative.html} (75%) rename css/css-tables/{subpixel-collapsed-borders-003.html => subpixel-collapsed-borders-003.tentative.html} (64%) rename css/css-ui/parsing/{outline-width-computed.html => outline-width-computed.tentative.html} (96%) diff --git a/css/css-borders/border-width-rounding.html b/css/css-borders/border-width-rounding.html new file mode 100644 index 000000000000000..be6e241234bd90a --- /dev/null +++ b/css/css-borders/border-width-rounding.html @@ -0,0 +1,52 @@ + + + + + CSS Border: width rounding + + + + + + + + + + + +

+ 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. +

+ + + + diff --git a/css/css-borders/border-width-rounding.tentative.html b/css/css-borders/border-width-rounding.tentative.html new file mode 100644 index 000000000000000..04c4ddf40bd7452 --- /dev/null +++ b/css/css-borders/border-width-rounding.tentative.html @@ -0,0 +1,53 @@ + + + + + CSS Border: width rounding + + + + + + + + + + + +

+ 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. +

+ + + + diff --git a/css/css-borders/reference/subpixel-border-width-ref.tentative.html b/css/css-borders/reference/subpixel-border-width-ref.tentative.html new file mode 100644 index 000000000000000..3ba8ac5754ef751 --- /dev/null +++ b/css/css-borders/reference/subpixel-border-width-ref.tentative.html @@ -0,0 +1,44 @@ + + + + + CSS Border: width computed value + + + + + + + + +

+ 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. +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/css/css-borders/subpixel-border-width.tentative.html b/css/css-borders/subpixel-border-width.tentative.html new file mode 100644 index 000000000000000..d056c01c914c88a --- /dev/null +++ b/css/css-borders/subpixel-border-width.tentative.html @@ -0,0 +1,48 @@ + + + + + CSS Border: width computed value + + + + + + + + + + + + +

+ 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. +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/css/css-column-rule/reference/subpixel-column-rule-width-ref.tentative.html b/css/css-column-rule/reference/subpixel-column-rule-width-ref.tentative.html new file mode 100644 index 000000000000000..47300675fb84313 --- /dev/null +++ b/css/css-column-rule/reference/subpixel-column-rule-width-ref.tentative.html @@ -0,0 +1,92 @@ + + + + + + CSS Column-Rule: width computed value + + + + + + + + +

+ 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. +

+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ + + diff --git a/css/css-column-rule/subpixel-column-rule-width.tentative.html b/css/css-column-rule/subpixel-column-rule-width.tentative.html new file mode 100644 index 000000000000000..5b35c2802c6b358 --- /dev/null +++ b/css/css-column-rule/subpixel-column-rule-width.tentative.html @@ -0,0 +1,94 @@ + + + + + CSS Column-Rule: width computed value + + + + + + + + + + + + +

+ 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. +

+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ +
+ Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +
+ + diff --git a/css/css-outline/outline-width-rounding.html b/css/css-outline/outline-width-rounding.html new file mode 100644 index 000000000000000..c50945e6c584f91 --- /dev/null +++ b/css/css-outline/outline-width-rounding.html @@ -0,0 +1,52 @@ + + + + + CSS Outline: width rounding + + + + + + + + + + + +

+ 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. +

+ + + + diff --git a/css/css-outline/outline-width-rounding.tentative.html b/css/css-outline/outline-width-rounding.tentative.html new file mode 100644 index 000000000000000..162d938cf9c488f --- /dev/null +++ b/css/css-outline/outline-width-rounding.tentative.html @@ -0,0 +1,53 @@ + + + + + CSS Outline: width rounding + + + + + + + + + + + +

+ 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. +

+ + + + diff --git a/css/css-outline/reference/subpixel-outline-width-ref.tentative.html b/css/css-outline/reference/subpixel-outline-width-ref.tentative.html new file mode 100644 index 000000000000000..28d84fabb77750d --- /dev/null +++ b/css/css-outline/reference/subpixel-outline-width-ref.tentative.html @@ -0,0 +1,44 @@ + + + + + CSS Outline: width computed value + + + + + + + + +

+ 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. +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/css/css-outline/subpixel-outline-width.tentative.html b/css/css-outline/subpixel-outline-width.tentative.html new file mode 100644 index 000000000000000..a9fc0c49cf3e4a2 --- /dev/null +++ b/css/css-outline/subpixel-outline-width.tentative.html @@ -0,0 +1,48 @@ + + + + + CSS Outline: width computed value + + + + + + + + + + + + +

+ 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. +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/css/css-tables/subpixel-collapsed-borders-003-ref.html b/css/css-tables/subpixel-collapsed-borders-003-ref.tentative.html similarity index 75% rename from css/css-tables/subpixel-collapsed-borders-003-ref.html rename to css/css-tables/subpixel-collapsed-borders-003-ref.tentative.html index 78e0be389393e23..46049a0f1bff661 100644 --- a/css/css-tables/subpixel-collapsed-borders-003-ref.html +++ b/css/css-tables/subpixel-collapsed-borders-003-ref.tentative.html @@ -12,7 +12,8 @@ } -

There should be a square with a green border, not a red border. +

+ There should be a square with a green border, not a red border.

diff --git a/css/css-tables/subpixel-collapsed-borders-003.html b/css/css-tables/subpixel-collapsed-borders-003.tentative.html similarity index 64% rename from css/css-tables/subpixel-collapsed-borders-003.html rename to css/css-tables/subpixel-collapsed-borders-003.tentative.html index e22df9e51a6a394..036f4c440c06aa2 100644 --- a/css/css-tables/subpixel-collapsed-borders-003.html +++ b/css/css-tables/subpixel-collapsed-borders-003.tentative.html @@ -3,23 +3,24 @@ - - + + -

There should be a square with a green border, not a red border. +

+ There should be a square with a green border, not a red border.

diff --git a/css/css-ui/parsing/outline-width-computed.html b/css/css-ui/parsing/outline-width-computed.tentative.html similarity index 96% rename from css/css-ui/parsing/outline-width-computed.html rename to css/css-ui/parsing/outline-width-computed.tentative.html index abd5826bbb387ec..ecb719bd758cdf4 100644 --- a/css/css-ui/parsing/outline-width-computed.html +++ b/css/css-ui/parsing/outline-width-computed.tentative.html @@ -24,7 +24,7 @@