diff --git a/components/layout_2020/display_list/mod.rs b/components/layout_2020/display_list/mod.rs index 97b2e25a82e..3cf2e8cc78d 100644 --- a/components/layout_2020/display_list/mod.rs +++ b/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 { - radii.top_left.width -= offsets.left; - radii.bottom_left.width -= offsets.left; +fn inner_radii(mut radii: wr::BorderRadius, insets: units::LayoutSideOffsets) -> wr::BorderRadius { + assert!(insets.left >= 0.0, "left inset must not be negative"); + radii.top_left.width -= insets.left; + radii.bottom_left.width -= insets.left; - radii.top_right.width -= offsets.right; - radii.bottom_right.width -= offsets.right; + assert!(insets.right >= 0.0, "left inset must not be negative"); + radii.top_right.width -= insets.right; + radii.bottom_right.width -= insets.right; - radii.top_left.height -= offsets.top; - radii.top_right.height -= offsets.top; + assert!(insets.top >= 0.0, "top inset must not be negative"); + radii.top_left.height -= insets.top; + radii.top_right.height -= insets.top; - radii.bottom_left.height -= offsets.bottom; - radii.bottom_right.height -= offsets.bottom; + assert!(insets.bottom >= 0.0, "bottom inset must not be negative"); + radii.bottom_left.height -= insets.bottom; + radii.bottom_right.height -= insets.bottom; radii } -fn expand_radii(mut radii: wr::BorderRadius, increment: f32) -> wr::BorderRadius { - assert!(increment > 0.0, "increment must be positive"); +fn offset_radii(mut radii: wr::BorderRadius, offset: f32) -> wr::BorderRadius { + 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); diff --git a/components/style/properties/longhands/outline.mako.rs b/components/style/properties/longhands/outline.mako.rs index c74fb804b6a..5c3dd15cbb6 100644 --- a/components/style/properties/longhands/outline.mako.rs +++ b/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", )} diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini index 58ecba843a1..30f2bea0305 100644 --- a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini +++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini @@ -2,147 +2,54 @@ [Web Animations: property from [inherit\] to [20px\] at (-0.3) should be [33px\]] expected: FAIL - [CSS Animations: property from [initial\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - [Web Animations: property from neutral to [20px\] at (1) should be [20px\]] expected: FAIL - [CSS Animations: property from neutral to [20px\] at (1.5) should be [25px\]] - expected: FAIL - [Web Animations: property from neutral to [20px\] at (0.6) should be [16px\]] expected: FAIL - [CSS Transitions: property from [unset\] to [20px\] at (0) should be [0px\]] - expected: FAIL - [Web Animations: property from [initial\] to [20px\] at (0.3) should be [6px\]] expected: FAIL [Web Animations: property from [unset\] to [20px\] at (0.6) should be [12px\]] expected: FAIL - [CSS Animations: property from [-5px\] to [5px\] at (0.3) should be [-2px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from neutral to [20px\] at (0.3) should be [13px\]] - expected: FAIL - - [CSS Transitions: property from neutral to [20px\] at (0.6) should be [16px\]] - expected: FAIL - - [CSS Animations: property from [initial\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (-0.3) should be [33px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - - [CSS Animations: property from neutral to [20px\] at (-0.3) should be [7px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - [Web Animations: property from [initial\] to [20px\] at (1) should be [20px\]] expected: FAIL [Web Animations: property from [initial\] to [20px\] at (0) should be [0px\]] expected: FAIL - [CSS Animations: property from [initial\] to [20px\] at (1) should be [20px\]] - expected: FAIL - [Web Animations: property from [unset\] to [20px\] at (0.3) should be [6px\]] expected: FAIL - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (0) should be [30px\]] - expected: FAIL - [Web Animations: property from [initial\] to [20px\] at (1.5) should be [30px\]] expected: FAIL - [CSS Transitions with transition: all: property from neutral to [20px\] at (1.5) should be [25px\]] - expected: FAIL - - [CSS Animations: property from [-5px\] to [5px\] at (1.5) should be [10px\]] - expected: FAIL - [Web Animations: property from [inherit\] to [20px\] at (0.3) should be [27px\]] expected: FAIL - [CSS Transitions: property from neutral to [20px\] at (1) should be [20px\]] - expected: FAIL - [Web Animations: property from [inherit\] to [20px\] at (1.5) should be [15px\]] expected: FAIL - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Animations: property from [-5px\] to [5px\] at (-0.3) should be [-8px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (0.6) should be [1px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (0.3) should be [27px\]] - expected: FAIL - - [CSS Animations: property from neutral to [20px\] at (0) should be [10px\]] - expected: FAIL - [Web Animations: property from [-5px\] to [5px\] at (1.5) should be [10px\]] expected: FAIL [Web Animations: property from [-5px\] to [5px\] at (0.6) should be [1px\]] expected: FAIL - [CSS Animations: property from [inherit\] to [20px\] at (0.3) should be [27px\]] - expected: FAIL - - [CSS Animations: property from [-5px\] to [5px\] at (0) should be [-5px\]] - expected: FAIL - [Web Animations: property from [unset\] to [20px\] at (-0.3) should be [-6px\]] expected: FAIL - [CSS Transitions: property from [initial\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (1) should be [5px\]] - expected: FAIL - - [CSS Transitions: property from [unset\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - [Web Animations: property from [-5px\] to [5px\] at (0.3) should be [-2px\]] expected: FAIL - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (0) should be [0px\]] - expected: FAIL - [Web Animations: property from [inherit\] to [20px\] at (0) should be [30px\]] expected: FAIL - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (1) should be [20px\]] - expected: FAIL - [Web Animations: property from neutral to [20px\] at (1.5) should be [25px\]] expected: FAIL - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (0.3) should be [-2px\]] - expected: FAIL - [Web Animations: property from [unset\] to [20px\] at (1) should be [20px\]] expected: FAIL @@ -152,209 +59,32 @@ [Web Animations: property from neutral to [20px\] at (0) should be [10px\]] expected: FAIL - [CSS Animations: property from neutral to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Transitions: property from [initial\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - [Web Animations: property from [initial\] to [20px\] at (-0.3) should be [-6px\]] expected: FAIL - [CSS Animations: property from [unset\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from neutral to [20px\] at (1) should be [20px\]] - expected: FAIL - [Web Animations: property from [unset\] to [20px\] at (1.5) should be [30px\]] expected: FAIL - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (1.5) should be [10px\]] - expected: FAIL - [Web Animations: property from neutral to [20px\] at (-0.3) should be [7px\]] expected: FAIL - [CSS Transitions: property from neutral to [20px\] at (-0.3) should be [7px\]] - expected: FAIL - - [CSS Transitions: property from [initial\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Animations: property from [initial\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - - [CSS Animations: property from [-5px\] to [5px\] at (1) should be [5px\]] - expected: FAIL - - [CSS Animations: property from [-5px\] to [5px\] at (0.6) should be [1px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (1.5) should be [30px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (1.5) should be [15px\]] - expected: FAIL - - [CSS Transitions: property from [-5px\] to [5px\] at (1.5) should be [10px\]] - expected: FAIL - - [CSS Transitions: property from [initial\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - - [CSS Transitions: property from [unset\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Animations: property from [inherit\] to [20px\] at (0) should be [30px\]] - expected: FAIL - - [CSS Transitions: property from [unset\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - - [CSS Animations: property from [unset\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (0.3) should be [27px\]] - expected: FAIL - - [CSS Transitions: property from [initial\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Animations: property from [inherit\] to [20px\] at (-0.3) should be [33px\]] - expected: FAIL - - [CSS Animations: property from [unset\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Animations: property from [initial\] to [20px\] at (0) should be [0px\]] - expected: FAIL - [Web Animations: property from neutral to [20px\] at (0.3) should be [13px\]] expected: FAIL [Web Animations: property from [initial\] to [20px\] at (0.6) should be [12px\]] expected: FAIL - [CSS Animations: property from neutral to [20px\] at (0.3) should be [13px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [initial\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - - [CSS Transitions: property from [unset\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Animations: property from [inherit\] to [20px\] at (1.5) should be [15px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (1.5) should be [15px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (0) should be [30px\]] - expected: FAIL - - [CSS Animations: property from [inherit\] to [20px\] at (0.6) should be [24px\]] - expected: FAIL - - [CSS Transitions: property from neutral to [20px\] at (1.5) should be [25px\]] - expected: FAIL - - [CSS Transitions: property from [initial\] to [20px\] at (0) should be [0px\]] - expected: FAIL - - [CSS Transitions: property from [-5px\] to [5px\] at (0.6) should be [1px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (-0.3) should be [33px\]] - expected: FAIL - - [CSS Transitions: property from neutral to [20px\] at (0.3) should be [13px\]] - expected: FAIL - [Web Animations: property from [-5px\] to [5px\] at (0) should be [-5px\]] expected: FAIL - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Animations: property from [unset\] to [20px\] at (0) should be [0px\]] - expected: FAIL - - [CSS Transitions: property from [unset\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - - [CSS Animations: property from neutral to [20px\] at (0.6) should be [16px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from neutral to [20px\] at (-0.3) should be [7px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [inherit\] to [20px\] at (0.6) should be [24px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from neutral to [20px\] at (0) should be [10px\]] - expected: FAIL - - [CSS Animations: property from [inherit\] to [20px\] at (1) should be [20px\]] - expected: FAIL - [Web Animations: property from [-5px\] to [5px\] at (-0.3) should be [-8px\]] expected: FAIL - [CSS Transitions: property from neutral to [20px\] at (0) should be [10px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (0) should be [0px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [unset\] to [20px\] at (0.6) should be [12px\]] - expected: FAIL - - [CSS Transitions: property from [inherit\] to [20px\] at (0.6) should be [24px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (-0.3) should be [-8px\]] - expected: FAIL - - [CSS Animations: property from [initial\] to [20px\] at (-0.3) should be [-6px\]] - expected: FAIL - - [CSS Transitions: property from [-5px\] to [5px\] at (-0.3) should be [-8px\]] - expected: FAIL - - [CSS Transitions: property from [-5px\] to [5px\] at (0) should be [-5px\]] - expected: FAIL - - [CSS Transitions: property from [-5px\] to [5px\] at (1) should be [5px\]] - expected: FAIL - [Web Animations: property from [inherit\] to [20px\] at (1) should be [20px\]] expected: FAIL - [CSS Transitions: property from [-5px\] to [5px\] at (0.3) should be [-2px\]] - expected: FAIL - [Web Animations: property from [inherit\] to [20px\] at (0.6) should be [24px\]] expected: FAIL - [CSS Transitions with transition: all: property from neutral to [20px\] at (0.6) should be [16px\]] - expected: FAIL - - [CSS Animations: property from [unset\] to [20px\] at (1) should be [20px\]] - expected: FAIL - - [CSS Transitions with transition: all: property from [-5px\] to [5px\] at (0) should be [-5px\]] - expected: FAIL - - [CSS Animations: property from [unset\] to [20px\] at (0.3) should be [6px\]] - expected: FAIL - [Web Animations: property from [unset\] to [20px\] at (0) should be [0px\]] expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini index 2e0803f8a94..a09a2a24912 100644 --- a/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini +++ b/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 diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini deleted file mode 100644 index c6b964624ce..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-010.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini deleted file mode 100644 index 4384a580889..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-012.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini deleted file mode 100644 index 8c9e8688a88..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-013.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini deleted file mode 100644 index b9f50b7aec4..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[outline-017.html] - [outline-offset is animated as a length] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-negative-offset-composited-scroll.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-negative-offset-composited-scroll.html.ini deleted file mode 100644 index 40f44ee0111..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-negative-offset-composited-scroll.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-negative-offset-composited-scroll.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini deleted file mode 100644 index 812d9d08208..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-offset-001.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini deleted file mode 100644 index 93693c6a148..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-offset-table-001.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset.html.ini deleted file mode 100644 index dec57f90b68..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline-offset.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini deleted file mode 100644 index ec4c9aa418f..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini +++ /dev/null @@ -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 diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini deleted file mode 100644 index 5c7f6209875..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini +++ /dev/null @@ -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 diff --git a/tests/wpt/mozilla/meta-layout-2020/css/outline_offset_a.html.ini b/tests/wpt/mozilla/meta-layout-2020/css/outline_offset_a.html.ini deleted file mode 100644 index af5321d7f77..00000000000 --- a/tests/wpt/mozilla/meta-layout-2020/css/outline_offset_a.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[outline_offset_a.html] - expected: FAIL diff --git a/tests/wpt/mozilla/meta-layout-2020/mozilla/calc.html.ini b/tests/wpt/mozilla/meta-layout-2020/mozilla/calc.html.ini index c19ee6e326d..2806297b49f 100644 --- a/tests/wpt/mozilla/meta-layout-2020/mozilla/calc.html.ini +++ b/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