Skip to content

Commit 39fdcbc

Browse files
Calme1709AtkinsSJ
Calme1709
authored and
AtkinsSJ
committed
LibWeb: Improve support for CalculatedStyleValue in translate
- Omit calcs that are resolved to `0px` from the serialized value - Allow CSV to be the 'Z' component in interpolated value. - Allow calcs with mixed percentages in the first two arguments. To achieve the third item above the concept of a "special" value parsing context has been added - this will also be useful for instance for different arguments of color functions having different contexts. Gains us 23 WPT tests
1 parent 18d65b0 commit 39fdcbc

File tree

10 files changed

+57
-43
lines changed

10 files changed

+57
-43
lines changed

‎Libraries/LibWeb/CSS/Interpolation.cpp‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -341,9 +341,8 @@ static RefPtr<CSSStyleValue const> interpolate_translate(DOM::Element& element,
341341
}
342342

343343
StyleValueVector new_values = { *interpolated_x, *interpolated_y };
344-
if (interpolated_z && interpolated_z->is_length() && !interpolated_z->as_length().equals(zero_px)) {
344+
if (interpolated_z)
345345
new_values.append(*interpolated_z);
346-
}
347346

348347
return TransformationStyleValue::create(
349348
PropertyID::Translate,

‎Libraries/LibWeb/CSS/Parser/Parser.cpp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1685,7 +1685,7 @@ bool Parser::context_allows_quirky_length() const
16851685
[top_level_property](FunctionContext const& function_context) {
16861686
return function_context.name == "rect"sv && top_level_property == PropertyID::Clip;
16871687
},
1688-
[](DescriptorContext const&) { return false; });
1688+
[](auto const&) { return false; });
16891689
}
16901690

16911691
return unitless_length_allowed;

‎Libraries/LibWeb/CSS/Parser/Parser.h‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -548,7 +548,10 @@ class Parser {
548548
AtRuleID at_rule;
549549
DescriptorID descriptor;
550550
};
551-
using ValueParsingContext = Variant<PropertyID, FunctionContext, DescriptorContext>;
551+
enum SpecialContext : u8 {
552+
TranslateZArgument
553+
};
554+
using ValueParsingContext = Variant<PropertyID, FunctionContext, DescriptorContext, SpecialContext>;
552555
Vector<ValueParsingContext> m_value_context;
553556
auto push_temporary_value_parsing_context(ValueParsingContext&& context)
554557
{

‎Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4626,6 +4626,7 @@ RefPtr<CSSStyleValue const> Parser::parse_translate_value(TokenStream<ComponentV
46264626
return TransformationStyleValue::create(PropertyID::Translate, TransformFunction::Translate, { maybe_x.release_nonnull(), maybe_y.release_nonnull() });
46274627
}
46284628

4629+
auto context_guard = push_temporary_value_parsing_context(SpecialContext::TranslateZArgument);
46294630
auto maybe_z = parse_length_value(tokens);
46304631
if (!maybe_z)
46314632
return nullptr;

‎Libraries/LibWeb/CSS/Parser/ValueParsing.cpp‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2231,14 +2231,12 @@ RefPtr<CSSStyleValue const> Parser::parse_color_value(TokenStream<ComponentValue
22312231
if (!m_value_context.is_empty()) {
22322232
quirky_color_allowed = m_value_context.first().visit(
22332233
[](PropertyID const& property_id) { return property_has_quirk(property_id, Quirk::HashlessHexColor); },
2234-
[](FunctionContext const&) { return false; },
2235-
[](DescriptorContext const&) { return false; });
2234+
[](auto const&) { return false; });
22362235
}
22372236
for (auto i = 1u; i < m_value_context.size() && quirky_color_allowed; i++) {
22382237
quirky_color_allowed = m_value_context[i].visit(
22392238
[](PropertyID const& property_id) { return property_has_quirk(property_id, Quirk::HashlessHexColor); },
2240-
[](FunctionContext const&) { return false; },
2241-
[](DescriptorContext const&) { return false; });
2239+
[](auto const&) { return false; });
22422240
}
22432241
if (quirky_color_allowed) {
22442242
// NOTE: This algorithm is no longer in the spec, since the concept got moved and renamed. However, it works,
@@ -4108,6 +4106,14 @@ RefPtr<CSSStyleValue const> Parser::parse_calculated_value(ComponentValue const&
41084106
[](DescriptorContext const&) -> Optional<CalculationContext> {
41094107
// FIXME: If any descriptors have `<*-percentage>` or `<integer>` types, add them here.
41104108
return CalculationContext {};
4109+
},
4110+
[](SpecialContext special_context) -> Optional<CalculationContext> {
4111+
switch (special_context) {
4112+
case SpecialContext::TranslateZArgument:
4113+
// Percentages are disallowed for the Z axis
4114+
return CalculationContext {};
4115+
}
4116+
VERIFY_NOT_REACHED();
41114117
});
41124118
if (maybe_context.has_value()) {
41134119
context = maybe_context.release_value();

‎Libraries/LibWeb/CSS/Properties.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3447,7 +3447,12 @@
34473447
"inherited": false,
34483448
"initial": "none",
34493449
"affects-layout": false,
3450-
"affects-stacking-context": true
3450+
"affects-stacking-context": true,
3451+
"valid-types": [
3452+
"length [-∞,∞]",
3453+
"percentage [-∞,∞]"
3454+
],
3455+
"percentages-resolve-to": "length"
34513456
},
34523457
"unicode-bidi": {
34533458
"animation-type": "none",

‎Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,11 +147,12 @@ String TransformationStyleValue::to_string(SerializationMode mode) const
147147
}
148148
if (m_properties.property == PropertyID::Translate) {
149149
auto resolve_to_string = [mode](CSSStyleValue const& value) -> Optional<String> {
150-
if (value.is_length()) {
151-
if (value.as_length().length().raw_value() == 0 && value.as_length().length().type() == Length::Type::Px)
152-
return {};
153-
}
154-
return value.to_string(mode);
150+
auto string_value = value.to_string(mode);
151+
152+
if (string_value == "0px"_string)
153+
return {};
154+
155+
return string_value;
155156
};
156157

157158
auto x_value = resolve_to_string(m_properties.values[0]);

‎Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Harness status: OK
22

33
Found 408 tests
44

5-
350 Pass
6-
58 Fail
5+
370 Pass
6+
38 Fail
77
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
88
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (0) should be [-100px]
99
Pass CSS Transitions: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
@@ -148,30 +148,30 @@ Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at
148148
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
149149
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
150150
Pass Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
151-
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
152-
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
153-
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
154-
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
151+
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
152+
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
153+
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
154+
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
155155
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
156-
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
157-
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
158-
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
159-
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
160-
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
156+
Pass CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
157+
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
158+
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
159+
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
160+
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
161161
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
162-
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
163-
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
164-
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
165-
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
166-
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
162+
Pass CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
163+
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
164+
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
165+
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
166+
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
167167
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
168-
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
169-
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
170-
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
171-
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
172-
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
168+
Pass CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
169+
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
170+
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
171+
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
172+
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
173173
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
174-
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
174+
Pass Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
175175
Pass CSS Transitions: property <translate> from [none] to [none] at (-1) should be [none]
176176
Pass CSS Transitions: property <translate> from [none] to [none] at (0) should be [none]
177177
Pass CSS Transitions: property <translate> from [none] to [none] at (0.125) should be [none]

‎Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ Harness status: OK
22

33
Found 19 tests
44

5-
17 Pass
6-
2 Fail
5+
18 Pass
6+
1 Fail
77
Pass Property translate value 'none'
88
Pass Property translate value '0px'
99
Pass Property translate value '100%'
1010
Pass Property translate value '100px 0px'
1111
Pass Property translate value '100px 0.1px'
1212
Pass Property translate value '100px 0%'
13-
Fail Property translate value '100px calc(10px - 10%)'
13+
Pass Property translate value '100px calc(10px - 10%)'
1414
Pass Property translate value '100px 200%'
1515
Pass Property translate value '100% 200px'
1616
Pass Property translate value '100px 200px 0px'

‎Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ Harness status: OK
22

33
Found 20 tests
44

5-
18 Pass
6-
2 Fail
5+
20 Pass
76
Pass e.style['translate'] = "none" should set the property value
87
Pass e.style['translate'] = "0px" should set the property value
98
Pass e.style['translate'] = "100%" should set the property value
109
Pass e.style['translate'] = "100px 0px" should set the property value
1110
Pass e.style['translate'] = "100px 0.1px" should set the property value
1211
Pass e.style['translate'] = "100px 0%" should set the property value
13-
Fail e.style['translate'] = "100px calc(10px - 10%)" should set the property value
12+
Pass e.style['translate'] = "100px calc(10px - 10%)" should set the property value
1413
Pass e.style['translate'] = "100px 200%" should set the property value
1514
Pass e.style['translate'] = "100% 200px" should set the property value
1615
Pass e.style['translate'] = "100px 200px 0px" should set the property value
@@ -21,6 +20,6 @@ Pass e.style['translate'] = "100% 200% 300px" should set the property value
2120
Pass e.style['translate'] = "100% 0% 200px" should set the property value
2221
Pass e.style['translate'] = "0% 0% 100px" should set the property value
2322
Pass e.style['translate'] = "0em 0em 100px" should set the property value
24-
Fail e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value
23+
Pass e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value
2524
Pass e.style['translate'] = "0" should set the property value
2625
Pass e.style['translate'] = "1px 2px 0" should set the property value

0 commit comments

Comments
 (0)