Skip to content

Commit

Permalink
layout: Respond to shorthand property requests with real values (serv…
Browse files Browse the repository at this point in the history 
…o#31277)

* Respond to shorthand property requests with real values

Signed-off-by: Sebastian C <sebsebmc@gmail.com>

* Cleanup formatting and old comments

Signed-off-by: Sebastian C <sebsebmc@gmail.com>

* Update WPT expectations

Signed-off-by: Sebastian C <sebsebmc@gmail.com>

* Refactor out helper fn

Signed-off-by: Sebastian C <sebsebmc@gmail.com>

* Cleanup

Signed-off-by: Sebastian C <sebsebmc@gmail.com>

---------

Signed-off-by: Sebastian C <sebsebmc@gmail.com>
  • Loading branch information
@sebsebmc @Taym95
sebsebmc authored and Taym95 committed Feb 11, 2024
1 parent d97758f commit a4d749a
Show file tree
Hide file tree
Showing 51 changed files with 155 additions and 1,666 deletions.
35 changes: 28 additions & 7 deletions components/layout_2020/query.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ use style::computed_values::position::T as Position;
use style::context::{StyleContext, ThreadLocalStyleContext};
use style::dom::{OpaqueNode, TElement};
use style::properties::style_structs::Font;
use style::properties::{LonghandId, PropertyDeclarationId, PropertyId};
use style::properties::{
Importance, LonghandId, PropertyDeclarationBlock, PropertyDeclarationId, PropertyId,
};
use style::selector_parser::PseudoElement;
use style::stylist::RuleInclusion;
use style::traversal::resolve_style;
Expand Down Expand Up @@ -258,9 +260,9 @@ pub fn process_resolved_style_request<'dom>(
let style = &*layout_element.resolved_style();
let longhand_id = match *property {
PropertyId::LonghandAlias(id, _) | PropertyId::Longhand(id) => id,
// Firefox returns blank strings for the computed value of shorthands,
// so this should be web-compatible.
PropertyId::ShorthandAlias(..) | PropertyId::Shorthand(_) => return String::new(),
PropertyId::ShorthandAlias(id, _) | PropertyId::Shorthand(id) => {
return shorthand_to_css_string(id, style);
},
PropertyId::Custom(ref name) => {
return style.computed_value_to_string(PropertyDeclarationId::Custom(name));
},
Expand Down Expand Up @@ -379,9 +381,9 @@ pub fn process_resolved_style_request_for_unstyled_node<'dom>(
let style = styles.primary();
let longhand_id = match *property {
PropertyId::LonghandAlias(id, _) | PropertyId::Longhand(id) => id,
// Firefox returns blank strings for the computed value of shorthands,
// so this should be web-compatible.
PropertyId::ShorthandAlias(..) | PropertyId::Shorthand(_) => return String::new(),
PropertyId::ShorthandAlias(id, _) | PropertyId::Shorthand(id) => {
return shorthand_to_css_string(id, style);
},
PropertyId::Custom(ref name) => {
return style.computed_value_to_string(PropertyDeclarationId::Custom(name));
},
Expand All @@ -392,6 +394,25 @@ pub fn process_resolved_style_request_for_unstyled_node<'dom>(
style.computed_value_to_string(PropertyDeclarationId::Longhand(longhand_id))
}

fn shorthand_to_css_string(
id: style::properties::ShorthandId,
style: &style::properties::ComputedValues,
) -> String {
use style::values::resolved::Context;
let mut block = PropertyDeclarationBlock::new();
let mut dest = String::new();
for longhand in id.longhands() {
block.push(
style.computed_or_resolved_declaration(longhand, Some(&Context { style })),
Importance::Normal,
);
}
match block.shorthand_to_css(id, &mut dest) {
Ok(_) => dest.to_owned(),
Err(_) => String::new(),
}
}

pub fn process_offset_parent_query(
node: OpaqueNode,
fragment_tree: Option<Arc<FragmentTree>>,
Expand Down
18 changes: 0 additions & 18 deletions tests/wpt/meta/css/css-animations/computed-style-animation-parsing.html.ini
View file

This file was deleted.

3 changes: 0 additions & 3 deletions tests/wpt/meta/css/css-animations/parsing/animation-computed.html.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@
[Property animation value 'cubic-bezier(0, -2, 1, 3)']
expected: FAIL

[Property animation value 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)']
expected: FAIL

[Property animation value '1s -3s']
expected: FAIL

Expand Down
125 changes: 125 additions & 0 deletions tests/wpt/meta/css/css-backgrounds/animations/background-position-interpolation.html.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,128 @@
[Web Animations: property <background-position> from [unset\] to [80px 80px, 80px 80px, 80px 80px, 80px 80px\] at (0.75) should be [calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (-0.25) should be [-20px -20px, -20px -20px, -20px -20px, -20px -20px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0) should be [ 0px 0px, 0px 0px, 0px 0px, 0px 0px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.25) should be [ 20px 20px, 20px 20px, 20px 20px, 20px 20px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.5) should be [ 40px 40px, 40px 40px, 40px 40px, 40px 40px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.75) should be [ 60px 60px, 60px 60px, 60px 60px, 60px 60px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1) should be [ 80px 80px, 80px 80px, 80px 80px, 80px 80px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1.25) should be [100px 100px, 100px 100px, 100px 100px, 100px 100px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (-0.25) should be [-20px -20px, -20px -20px, -20px -20px, -20px -20px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0) should be [ 0px 0px, 0px 0px, 0px 0px, 0px 0px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.25) should be [ 20px 20px, 20px 20px, 20px 20px, 20px 20px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.5) should be [ 40px 40px, 40px 40px, 40px 40px, 40px 40px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.75) should be [ 60px 60px, 60px 60px, 60px 60px, 60px 60px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1) should be [ 80px 80px, 80px 80px, 80px 80px, 80px 80px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1.25) should be [100px 100px, 100px 100px, 100px 100px, 100px 100px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (-0.25) should be [-20px -20px, -20px -20px, -20px -20px, -20px -20px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0) should be [ 0px 0px, 0px 0px, 0px 0px, 0px 0px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.25) should be [ 20px 20px, 20px 20px, 20px 20px, 20px 20px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.5) should be [ 40px 40px, 40px 40px, 40px 40px, 40px 40px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (0.75) should be [ 60px 60px, 60px 60px, 60px 60px, 60px 60px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1) should be [ 80px 80px, 80px 80px, 80px 80px, 80px 80px\]]
expected: FAIL

[CSS Animations: property <background-position> from [top 0px left 0px\] to [left 80px top 80px\] at (1.25) should be [100px 100px, 100px 100px, 100px 100px, 100px 100px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (-0.25) should be [-10px -10px, 80px -20px, 0px -20px, 90px -10px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0) should be [ 0px 0px, 80px 0px, 0px 0px, 80px 0px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.25) should be [ 10px 10px, 80px 20px, 0px 20px, 70px 10px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.5) should be [ 20px 20px, 80px 40px, 0px 40px, 60px 20px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.75) should be [ 30px 30px, 80px 60px, 0px 60px, 50px 30px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1) should be [ 40px 40px, 80px 80px, 0px 80px, 40px 40px\]]
expected: FAIL

[CSS Transitions: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1.25) should be [ 50px 50px, 80px 100px, 0px 100px, 30px 50px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (-0.25) should be [-10px -10px, 80px -20px, 0px -20px, 90px -10px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0) should be [ 0px 0px, 80px 0px, 0px 0px, 80px 0px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.25) should be [ 10px 10px, 80px 20px, 0px 20px, 70px 10px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.5) should be [ 20px 20px, 80px 40px, 0px 40px, 60px 20px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.75) should be [ 30px 30px, 80px 60px, 0px 60px, 50px 30px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1) should be [ 40px 40px, 80px 80px, 0px 80px, 40px 40px\]]
expected: FAIL

[CSS Transitions with transition: all: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1.25) should be [ 50px 50px, 80px 100px, 0px 100px, 30px 50px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (-0.25) should be [-10px -10px, 80px -20px, 0px -20px, 90px -10px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0) should be [ 0px 0px, 80px 0px, 0px 0px, 80px 0px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.25) should be [ 10px 10px, 80px 20px, 0px 20px, 70px 10px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.5) should be [ 20px 20px, 80px 40px, 0px 40px, 60px 20px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (0.75) should be [ 30px 30px, 80px 60px, 0px 60px, 50px 30px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1) should be [ 40px 40px, 80px 80px, 0px 80px, 40px 40px\]]
expected: FAIL

[CSS Animations: property <background-position> from [0px 0px, 80px 0px\] to [40px 40px, 80px 80px, 0px 80px\] at (1.25) should be [ 50px 50px, 80px 100px, 0px 100px, 30px 50px\]]
expected: FAIL

0 comments on commit a4d749a

Please sign in to comment.