Implement outline-offset in layout-2020

Tests that are now passing:
- /_mozilla/css/outline_offset_a.htm
- /css/css-ui/outline-010.html
- /css/css-ui/outline-012.html
- /css/css-ui/outline-013.html
- /css/css-ui/outline-017.html
- /css/css-ui/outline-negative-offset-composited-scroll.html
- /css/css-ui/outline-offset-001.html
- /css/css-ui/outline-offset-table-001.html
- /css/css-ui/outline-offset.html
- /css/css-ui/parsing/outline-offset-computed.html
- /css/css-ui/parsing/outline-offset-valid.html

Also improvements in:
- /_mozilla/mozilla/calc.html
- /css/css-ui/animation/outline-offset-interpolation.html
- /css/css-ui/inheritance.html

components/layout_2020/display_list/mod.rs

@@ -610,7 +610,13 @@ impl<'a> BuilderForBoxFragment<'a> {
         if width == 0.0 {
             return;
         }
-        let outline_rect = self.border_rect.inflate(width, width);
+        let offset = outline
+            .outline_offset
+            .px()
+            .max(-self.border_rect.width() / 2.0)
+            .max(-self.border_rect.height() / 2.0) +
+            width;
+        let outline_rect = self.border_rect.inflate(offset, offset);
         let common = builder.common_properties(outline_rect, &self.fragment.style);
         let widths = SideOffsets2D::new_all_same(width);
         let style = match outline.outline_style {
@@ -625,7 +631,7 @@ impl<'a> BuilderForBoxFragment<'a> {
             right: side,
             bottom: side,
             left: side,
-            radius: expand_radii(self.border_radius, width),
+            radius: offset_radii(self.border_radius, offset),
             do_aa: true,
         });
         builder
@@ -722,29 +728,38 @@ fn image_rendering(ir: style::computed_values::image_rendering::T) -> wr::ImageR
 }
 
 /// Radii for the padding edge or content edge
-fn inner_radii(mut radii: wr::BorderRadius, offsets: units::LayoutSideOffsets) -> wr::BorderRadius {
+fn inner_radii(mut radii: wr::BorderRadius, insets: units::LayoutSideOffsets) -> wr::BorderRadius {
-    radii.top_left.width -= offsets.left;
+    assert!(insets.left >= 0.0, "left inset must not be negative");
-    radii.bottom_left.width -= offsets.left;
+    radii.top_left.width -= insets.left;
+    radii.bottom_left.width -= insets.left;
 
-    radii.top_right.width -= offsets.right;
+    assert!(insets.right >= 0.0, "left inset must not be negative");
-    radii.bottom_right.width -= offsets.right;
+    radii.top_right.width -= insets.right;
+    radii.bottom_right.width -= insets.right;
 
-    radii.top_left.height -= offsets.top;
+    assert!(insets.top >= 0.0, "top inset must not be negative");
-    radii.top_right.height -= offsets.top;
+    radii.top_left.height -= insets.top;
+    radii.top_right.height -= insets.top;
 
-    radii.bottom_left.height -= offsets.bottom;
+    assert!(insets.bottom >= 0.0, "bottom inset must not be negative");
-    radii.bottom_right.height -= offsets.bottom;
+    radii.bottom_left.height -= insets.bottom;
+    radii.bottom_right.height -= insets.bottom;
     radii
 }
 
-fn expand_radii(mut radii: wr::BorderRadius, increment: f32) -> wr::BorderRadius {
+fn offset_radii(mut radii: wr::BorderRadius, offset: f32) -> wr::BorderRadius {
-    assert!(increment > 0.0, "increment must be positive");
+    if offset == 0.0 {
+        return radii;
+    }
+    if offset < 0.0 {
+        return inner_radii(radii, units::LayoutSideOffsets::new_all_same(-offset));
+    }
     let expand = |radius: &mut f32| {
         // Expand the radius by the specified amount, but keeping sharp corners.
         // TODO: this behavior is not continuous, it's being discussed in the CSSWG:
         // https://github.com/w3c/csswg-drafts/issues/7103
         if *radius > 0.0 {
-            *radius += increment;
+            *radius += offset;
         }
     };
     expand(&mut radii.top_left.width);

components/style/properties/longhands/outline.mako.rs

@@ -59,7 +59,7 @@ ${helpers.predefined_type(
     "outline-offset",
     "Length",
     "crate::values::computed::Length::new(0.)",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset",
 )}

tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini

@@ -2,147 +2,54 @@
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
     expected: FAIL
 
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
     expected: FAIL
 
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
     expected: FAIL
 
   [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
     expected: FAIL
 
@@ -152,209 +59,32 @@
   [Web Animations: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
     expected: FAIL
 
   [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
     expected: FAIL
 
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
-    expected: FAIL
-
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
     expected: FAIL
 
-  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
-    expected: FAIL
-
-  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
-    expected: FAIL
-
   [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
     expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini

@@ -41,12 +41,6 @@
   [Property nav-up does not inherit]
     expected: FAIL
 
-  [Property outline-offset has initial value 0px]
-    expected: FAIL
-
-  [Property outline-offset does not inherit]
-    expected: FAIL
-
   [Property resize has initial value none]
     expected: FAIL
 

tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini

@@ -1,2 +0,0 @@
-[outline-010.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini

@@ -1,2 +0,0 @@
-[outline-012.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini

@@ -1,2 +0,0 @@
-[outline-013.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini

@@ -1,3 +0,0 @@
-[outline-017.html]
-  [outline-offset is animated as a length]
-    expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-negative-offset-composited-scroll.html.ini

@@ -1,2 +0,0 @@
-[outline-negative-offset-composited-scroll.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini

@@ -1,2 +0,0 @@
-[outline-offset-001.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini

@@ -1,2 +0,0 @@
-[outline-offset-table-001.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/outline-offset.html.ini

@@ -1,2 +0,0 @@
-[outline-offset.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini

@@ -1,15 +0,0 @@
-[outline-offset-computed.html]
-  [Property outline-offset value '2.5px']
-    expected: FAIL
-
-  [Property outline-offset value '0.5em']
-    expected: FAIL
-
-  [Property outline-offset value 'calc(10px + 0.5em)']
-    expected: FAIL
-
-  [Property outline-offset value 'calc(10px - 0.5em)']
-    expected: FAIL
-
-  [Property outline-offset value '10px']
-    expected: FAIL

tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini

@@ -1,12 +0,0 @@
-[outline-offset-valid.html]
-  [e.style['outline-offset'\] = "calc(3rem + 4vw)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline-offset'\] = "0" should set the property value]
-    expected: FAIL
-
-  [e.style['outline-offset'\] = "1px" should set the property value]
-    expected: FAIL
-
-  [e.style['outline-offset'\] = "2em" should set the property value]
-    expected: FAIL

tests/wpt/mozilla/meta-layout-2020/css/outline_offset_a.html.ini

@@ -1,2 +0,0 @@
-[outline_offset_a.html]
-  expected: FAIL

tests/wpt/mozilla/meta-layout-2020/mozilla/calc.html.ini

@@ -19,6 +19,3 @@
 
   [calc for column-width]
     expected: FAIL
-
-  [calc for outline-offset]
-    expected: FAIL