Auto merge of #29702 - Loirooriol:outline-offset, r=mrobinson

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

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #29701
<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because ___

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
This commit is contained in:
bors-servo 2023-05-03 18:28:18 +02:00 committed by GitHub
commit f29834608a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 30 additions and 340 deletions

View file

@ -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);

View file

@ -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",
)}

View file

@ -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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

View file

@ -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

View file

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

View file

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