Skip to content

Commit aec1624

Browse files
Calme1709Calme1709
committed
LibWeb: Coordinate border-* longhands at compute time
Updates the `position-serialization.html` test to be 2-valued so that all cases are covered.
1 parent 0b95516 commit aec1624

File tree

7 files changed

+277
-140
lines changed

7 files changed

+277
-140
lines changed

‎Libraries/LibWeb/CSS/StyleComputer.cpp‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2273,6 +2273,22 @@ static NonnullRefPtr<StyleValue const> compute_style_value_list(NonnullRefPtr<St
22732273
return StyleValueList::create(move(computed_entries), StyleValueList::Separator::Comma);
22742274
}
22752275

2276+
static NonnullRefPtr<StyleValue const> repeat_style_value_list_to_n_elements(NonnullRefPtr<StyleValue const> const& style_value, size_t n)
2277+
{
2278+
auto const& value_list = style_value->as_value_list();
2279+
2280+
if (value_list.size() == n)
2281+
return style_value;
2282+
2283+
StyleValueVector repeated_values;
2284+
repeated_values.ensure_capacity(n);
2285+
2286+
for (size_t i = 0; i < n; ++i)
2287+
repeated_values.unchecked_append(value_list.value_at(i, true));
2288+
2289+
return StyleValueList::create(move(repeated_values), value_list.separator());
2290+
}
2291+
22762292
NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(
22772293
PropertyID property_id,
22782294
NonnullRefPtr<StyleValue const> const& specified_value,
@@ -2285,6 +2301,16 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(
22852301
switch (property_id) {
22862302
case PropertyID::AnimationName:
22872303
return compute_animation_name(absolutized_value);
2304+
// NB: The background properties are coordinated at compute time rather than use time, unlike other coordinating list property groups
2305+
case PropertyID::BackgroundAttachment:
2306+
case PropertyID::BackgroundClip:
2307+
case PropertyID::BackgroundImage:
2308+
case PropertyID::BackgroundOrigin:
2309+
case PropertyID::BackgroundPositionX:
2310+
case PropertyID::BackgroundPositionY:
2311+
case PropertyID::BackgroundRepeat:
2312+
case PropertyID::BackgroundSize:
2313+
return repeat_style_value_list_to_n_elements(absolutized_value, get_property_specified_value(PropertyID::BackgroundImage)->as_value_list().size());
22882314
case PropertyID::BorderBottomWidth:
22892315
return compute_border_or_outline_width(absolutized_value, get_property_specified_value(PropertyID::BorderBottomStyle), device_pixels_per_css_pixel);
22902316
case PropertyID::BorderLeftWidth:

‎Tests/LibWeb/Text/expected/position-serialization.txt‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
inline: center center
2-
computed: 50% 50%
2+
computed: 50% 50%, 50% 50%
33
inline: left bottom
4-
computed: 0% 100%
4+
computed: 0% 100%, 0% 100%
55
inline: center top
6-
computed: 50% 0%
6+
computed: 50% 0%, 50% 0%
77
inline: center top 20%
8-
computed: 50% 20%
8+
computed: 50% 20%, 50% 20%
99
inline: left 10px top 20%
10-
computed: 10px 20%
10+
computed: 10px 20%, 10px 20%
1111
inline: 10px top
12-
computed: 10px 0%
12+
computed: 10px 0%, 10px 0%
1313
inline: right 10px bottom 20%
14-
computed: calc(100% - 10px) 80%
14+
computed: calc(100% - 10px) 80%, calc(100% - 10px) 80%
1515
inline: center center, left bottom
1616
computed: 50% 50%, 0% 100%
1717
inline: left 10px bottom 20%, right 10px top 20%

‎Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-position-interpolation.txt‎

Lines changed: 57 additions & 58 deletions
Large diffs are not rendered by default.

‎Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-size-interpolation.txt‎

Lines changed: 73 additions & 74 deletions
Large diffs are not rendered by default.

‎Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/parsing/background-computed.txt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
Harness status: OK
2+
3+
Found 35 tests
4+
5+
25 Pass
6+
10 Fail
7+
Fail Property background-attachment value 'local'
8+
Pass Property background-attachment value 'scroll, fixed'
9+
Pass Property background-attachment value 'local, fixed, scroll'
10+
Pass Property background-attachment value 'local, fixed, scroll, fixed'
11+
Fail Property background-clip value 'border-box'
12+
Pass Property background-clip value 'content-box, border-box'
13+
Pass Property background-clip value 'border-box, padding-box, content-box'
14+
Pass Property background-clip value 'content-box, border-box, padding-box, content-box'
15+
Pass Property background-clip value 'content-box, border-box, padding-box'
16+
Fail Property background-clip value 'content-box, border-box, border-area'
17+
Pass Property background-color value 'rgb(255, 0, 0)'
18+
Fail Property background-origin value 'border-box'
19+
Pass Property background-origin value 'content-box, border-box'
20+
Pass Property background-origin value 'border-box, padding-box, content-box'
21+
Pass Property background-origin value 'content-box, border-box, padding-box, content-box'
22+
Pass Property background-position value '50% 6px'
23+
Pass Property background-position value '12px 13px, 50% 6px'
24+
Pass Property background-position value '12px 13px, 50% 6px, 30px -10px'
25+
Pass Property background-position value '12px 13px, 50% 6px, 30px -10px, -7px 8px'
26+
Fail Property background-position-x value '0.5em'
27+
Pass Property background-position-x value '-20%, 10px'
28+
Pass Property background-position-x value 'center, left, right'
29+
Fail Property background-position-x value 'calc(10px - 0.5em), -20%, right, 15%'
30+
Fail Property background-position-y value '0.5em'
31+
Pass Property background-position-y value '-20%, 10px'
32+
Pass Property background-position-y value 'center, top, bottom'
33+
Fail Property background-position-y value 'calc(10px - 0.5em), -20%, bottom, 15%'
34+
Fail Property background-repeat value 'round'
35+
Pass Property background-repeat value 'repeat-x, repeat'
36+
Pass Property background-repeat value 'repeat space, round no-repeat, repeat-x'
37+
Pass Property background-repeat value 'repeat-y, round no-repeat, repeat-x, repeat'
38+
Fail Property background-size value 'contain'
39+
Pass Property background-size value 'auto 1px, 2% 3%'
40+
Pass Property background-size value 'auto 1px, 2% 3%, contain'
41+
Pass Property background-size value 'auto 1px, 2% 3%, contain, 7px 8px'

‎Tests/LibWeb/Text/input/position-serialization.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<script src="include.js"></script>
3-
<div id="target"></div>
3+
<div id="target" style="background-image: none, none;"></div>
44
<script>
55
test(() => {
66
const values = [

‎Tests/LibWeb/Text/input/wpt-import/css/css-backgrounds/parsing/background-computed.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Backgrounds and Borders: getComputedStyle().background with multiple layers</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background">
7+
<meta name="assert" content="The number of layers is determined by the number of comma-separated values in the background-image property. .">
8+
<script src="../../../resources/testharness.js"></script>
9+
<script src="../../../resources/testharnessreport.js"></script>
10+
<script src="../../../css/support/computed-testcommon.js"></script>
11+
<style>
12+
#target {
13+
background-image: none, none, none;
14+
font-size: 40px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="target"></div>
20+
<script>
21+
test_computed_value("background-attachment", "local", "local, local, local");
22+
test_computed_value("background-attachment", "scroll, fixed", "scroll, fixed, scroll");
23+
test_computed_value("background-attachment", "local, fixed, scroll");
24+
test_computed_value("background-attachment", "local, fixed, scroll, fixed", "local, fixed, scroll");
25+
26+
test_computed_value("background-clip", "border-box", "border-box, border-box, border-box");
27+
test_computed_value("background-clip", "content-box, border-box", "content-box, border-box, content-box");
28+
test_computed_value("background-clip", "border-box, padding-box, content-box");
29+
test_computed_value("background-clip", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box");
30+
test_computed_value("background-clip", "content-box, border-box, padding-box", "content-box, border-box, padding-box");
31+
test_computed_value("background-clip", "content-box, border-box, border-area", "content-box, border-box, border-area");
32+
33+
// background-color always computes as a single color.
34+
test_computed_value("background-color", "rgb(255, 0, 0)");
35+
36+
test_computed_value("background-origin", "border-box", "border-box, border-box, border-box");
37+
test_computed_value("background-origin", "content-box, border-box", "content-box, border-box, content-box");
38+
test_computed_value("background-origin", "border-box, padding-box, content-box");
39+
test_computed_value("background-origin", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box");
40+
41+
test_computed_value("background-position", "50% 6px", "50% 6px, 50% 6px, 50% 6px");
42+
test_computed_value("background-position", "12px 13px, 50% 6px", "12px 13px, 50% 6px, 12px 13px");
43+
test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px");
44+
test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px, -7px 8px", "12px 13px, 50% 6px, 30px -10px");
45+
46+
test_computed_value("background-position-x", "0.5em", "20px, 20px, 20px");
47+
test_computed_value("background-position-x", "-20%, 10px", "-20%, 10px, -20%");
48+
49+
test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100%");
50+
test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, right, 15%", "-10px, -20%, 100%");
51+
52+
test_computed_value("background-position-y", "0.5em", "20px, 20px, 20px");
53+
test_computed_value("background-position-y", "-20%, 10px", "-20%, 10px, -20%");
54+
test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100%");
55+
test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, bottom, 15%", "-10px, -20%, 100%");
56+
57+
test_computed_value("background-repeat", "round", "round, round, round");
58+
test_computed_value("background-repeat", "repeat-x, repeat", "repeat-x, repeat, repeat-x");
59+
test_computed_value("background-repeat", "repeat space, round no-repeat, repeat-x");
60+
test_computed_value("background-repeat", "repeat-y, round no-repeat, repeat-x, repeat", "repeat-y, round no-repeat, repeat-x");
61+
62+
test_computed_value("background-size", "contain", "contain, contain, contain");
63+
test_computed_value("background-size", "auto 1px, 2% 3%", "auto 1px, 2% 3%, auto 1px");
64+
test_computed_value("background-size", "auto 1px, 2% 3%, contain");
65+
test_computed_value("background-size", "auto 1px, 2% 3%, contain, 7px 8px", "auto 1px, 2% 3%, contain");
66+
67+
// Open issue: Define serialization for background shorthand
68+
// https://github.com/w3c/csswg-drafts/issues/418
69+
// test_computed_value("background", "rgb(1, 2, 3) none 4px 5px / 6px 7px repeat space scroll border-box padding-box");
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)