Skip to content

Commit aaf0660

Browse files
fantasaimnutt
fantasai
authored and
mnutt
committed
Make background shorthand default to border-box when border-area specified
https://bugs.webkit.org/show_bug.cgi?id=283308 rdar://140142957 Reviewed by Tim Nguyen. If the origin is not specified, but clip is given as border-area, set origin to border-box. See w3c/csswg-drafts#11167 * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-shorthand-serialization-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-shorthand-serialization.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-valid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-valid.html: * Source/WebCore/css/ShorthandSerializer.cpp: (WebCore::ShorthandSerializer::serializeLayered const): * Source/WebCore/css/parser/CSSPropertyParser.cpp: (WebCore::CSSPropertyParser::consumeBackgroundShorthand): Canonical link: https://commits.webkit.org/287521@main
1 parent 2535af1 commit aaf0660

File tree

6 files changed

+68
-5
lines changed

6 files changed

+68
-5
lines changed

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-shorthand-serialization-expected.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ PASS multiple backgrounds
55
FAIL background-size with non-initial background-position assert_equals: expected "url(\"/favicon.ico\") 0% 0% / 10rem" but got "url(\"/favicon.ico\") 0% 0% / 10rem auto"
66
FAIL multiple backgrounds with varying values assert_equals: expected "url(\"/favicon.ico\") left top no-repeat, url(\"/favicon.ico\") center center / 100% 100% no-repeat, white url(\"/favicon.ico\")" but got "url(\"/favicon.ico\") left top no-repeat, url(\"/favicon.ico\") center center / 100% 100% no-repeat, url(\"/favicon.ico\") white"
77
PASS all initial values
8+
PASS border-area border-box
9+
PASS border-area padding-box
810

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-shorthand-serialization.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>CSS Background Shorthand Serialization Test: background shorthand should only serialize non-initial values</title>
5+
<title>CSS Background Shorthand Specified Value Serialization Test: background shorthand should only serialize non-initial values</title>
66
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background">
77
<meta name="assert" content="background shorthand should only serialize non-initial values">
88
<script src="/resources/testharness.js"></script>
@@ -43,4 +43,16 @@
4343
element.style = `background: padding-box border-box;`;
4444
assert_equals(element.style.background , 'none');
4545
}, "all initial values");
46+
47+
48+
test((t) => {
49+
element.style = `background: border-area border-box;`;
50+
assert_equals(element.style.background , 'border-area');
51+
}, "border-area border-box");
52+
53+
54+
test((t) => {
55+
element.style = `background: border-area padding-box;`;
56+
assert_equals(element.style.background , 'padding-box border-area');
57+
}, "border-area padding-box");
4658
</script>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-valid-expected.txt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,22 @@ PASS e.style['background'] = "url(\"https://example.com/\") 1px 2px / 3px 4px sp
1818
PASS e.style['background'] = "url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box" should set background-repeat
1919
PASS e.style['background'] = "url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box" should set background-size
2020
PASS e.style['background'] = "url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url(\"https://example.com/\") 1px 2px / 3px 4px space round local padding-box content-box" should not set unrelated longhands
21+
PASS e.style['background'] = "border-box content-box" should set background-attachment
22+
PASS e.style['background'] = "border-box content-box" should set background-clip
23+
PASS e.style['background'] = "border-box content-box" should set background-color
24+
PASS e.style['background'] = "border-box content-box" should set background-image
25+
PASS e.style['background'] = "border-box content-box" should set background-origin
26+
PASS e.style['background'] = "border-box content-box" should set background-position
27+
PASS e.style['background'] = "border-box content-box" should set background-repeat
28+
PASS e.style['background'] = "border-box content-box" should set background-size
29+
PASS e.style['background'] = "border-box content-box" should not set unrelated longhands
30+
PASS e.style['background'] = "border-area" should set background-attachment
31+
PASS e.style['background'] = "border-area" should set background-clip
32+
PASS e.style['background'] = "border-area" should set background-color
33+
PASS e.style['background'] = "border-area" should set background-image
34+
PASS e.style['background'] = "border-area" should set background-origin
35+
PASS e.style['background'] = "border-area" should set background-position
36+
PASS e.style['background'] = "border-area" should set background-repeat
37+
PASS e.style['background'] = "border-area" should set background-size
38+
PASS e.style['background'] = "border-area" should not set unrelated longhands
2139

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/background-valid.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,26 @@
4343
'background-clip': 'content-box, content-box',
4444
'background-color': 'rgb(5, 6, 7)',
4545
})
46+
test_shorthand_value('background', 'border-box content-box', {
47+
'background-image': 'none',
48+
'background-position': '0% 0%',
49+
'background-size': 'auto',
50+
'background-repeat': 'repeat',
51+
'background-attachment': 'scroll',
52+
'background-origin': 'border-box',
53+
'background-clip': 'content-box',
54+
'background-color': 'transparent',
55+
})
56+
test_shorthand_value('background', 'border-area', {
57+
'background-image': 'none',
58+
'background-position': '0% 0%',
59+
'background-size': 'auto',
60+
'background-repeat': 'repeat',
61+
'background-attachment': 'scroll',
62+
'background-origin': 'border-box',
63+
'background-clip': 'border-area',
64+
'background-color': 'transparent',
65+
})
4666

4767
</script>
4868
</body>

‎Source/WebCore/css/ShorthandSerializer.cpp‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -673,11 +673,15 @@ String ShorthandSerializer::serializeLayered() const
673673
if (!layerValues.skip(j - 1) && !layerValues.skip(j))
674674
layerValues.skip(j) = true;
675675
} else if (!layerValues.skip(j - 1) || !layerValues.skip(j)) {
676-
// If the two are different, both need to be serialized, except in the special case of no-clip.
677-
if (layerValues.valueID(j) != CSSValueNoClip) {
678-
layerValues.skip(j - 1) = false;
679-
layerValues.skip(j) = false;
676+
// If the two are different, both need to be serialized, unless clip is invalid as origin
677+
if (layerValues.valueID(j) == CSSValueNoClip)
678+
continue;
679+
if (layerValues.valueID(j) == CSSValueBorderArea) {
680+
layerValues.skip(j - 1) = layerValues.valueID(j - 1) == CSSValueBorderBox;
681+
continue;
680682
}
683+
layerValues.skip(j - 1) = false;
684+
layerValues.skip(j) = false;
681685
}
682686
}
683687

‎Source/WebCore/css/parser/CSSPropertyParser.cpp‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2015,6 +2015,7 @@ bool CSSPropertyParser::consumeBackgroundShorthand(const StylePropertyShorthand&
20152015
do {
20162016
bool parsedLonghand[10] = { false };
20172017
bool lastParsedWasPosition = false;
2018+
bool clipIsBorderArea = false;
20182019
RefPtr<CSSValue> originValue;
20192020
do {
20202021
bool foundProperty = false;
@@ -2057,6 +2058,8 @@ bool CSSPropertyParser::consumeBackgroundShorthand(const StylePropertyShorthand&
20572058
if (value) {
20582059
if (property == CSSPropertyBackgroundOrigin || property == CSSPropertyMaskOrigin)
20592060
originValue = value;
2061+
else if (property == CSSPropertyBackgroundClip)
2062+
clipIsBorderArea = value->valueID() == CSSValueBorderArea;
20602063
parsedLonghand[i] = true;
20612064
foundProperty = true;
20622065
longhands[i].append(value.releaseNonNull());
@@ -2082,6 +2085,10 @@ bool CSSPropertyParser::consumeBackgroundShorthand(const StylePropertyShorthand&
20822085
longhands[i].append(originValue.releaseNonNull());
20832086
continue;
20842087
}
2088+
if (clipIsBorderArea && (property == CSSPropertyBackgroundOrigin) && !parsedLonghand[i]) {
2089+
longhands[i].append(CSSPrimitiveValue::create(CSSValueBorderBox));
2090+
continue;
2091+
}
20852092
if (!parsedLonghand[i])
20862093
longhands[i].append(Ref { CSSPrimitiveValue::implicitInitialValue() });
20872094
}

0 commit comments

Comments
 (0)