Skip to content

Commit 5b5e754

Browse files
Justin Michaudwebkit-commit-queue
Justin Michaud
authored and
webkit-commit-queue
committed
Implement initialValue support for CSS Custom Properties and Values API
https://bugs.webkit.org/show_bug.cgi?id=189819 Patch by Justin Michaud <[email protected]> on 2018-09-21 Reviewed by Simon Fraser. Source/WebCore: * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::customPropertyValue): * css/CSSCustomPropertyValue.cpp: (WebCore::CSSCustomPropertyValue::resolveVariableReferences const): * css/CSSCustomPropertyValue.h: * css/CSSRegisteredCustomProperty.h: * css/CSSVariableData.cpp: (WebCore::CSSVariableData::resolveVariableFallback const): (WebCore::CSSVariableData::resolveVariableReference const): (WebCore::CSSVariableData::resolveVariableReferences const): (WebCore::CSSVariableData::resolveTokenRange const): * css/CSSVariableData.h: * css/DOMCSSRegisterCustomProperty.cpp: (WebCore::DOMCSSRegisterCustomProperty::registerProperty): * css/DOMCSSRegisterCustomProperty.h: * css/DOMCSSRegisterCustomProperty.idl: * css/StyleResolver.cpp: (WebCore::StyleResolver::resolvedVariableValue): (WebCore::StyleResolver::applyCascadedProperties): * css/parser/CSSParser.cpp: (WebCore::CSSParser::parseValueWithVariableReferences): * css/parser/CSSParser.h: * dom/Document.h: (WebCore::Document::getCSSRegisteredCustomPropertySet const): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::checkVariablesInCustomProperties): * rendering/style/RenderStyle.h: LayoutTests: * css-custom-properties-api/initialValue-expected.html: Added. * css-custom-properties-api/initialValue.html: Added. * css-custom-properties-api/initialValueJS-expected.txt: Added. * css-custom-properties-api/initialValueJS.html: Added. * css-custom-properties-api/registerProperty-expected.txt: * css-custom-properties-api/registerProperty.html: * platform/win/TestExpectations: Canonical link: https://commits.webkit.org/204832@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236379 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent 564cee8 commit 5b5e754

24 files changed

Lines changed: 471 additions & 44 deletions

‎LayoutTests/ChangeLog‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
2018-09-21 Justin Michaud <[email protected]>
2+
3+
Implement initialValue support for CSS Custom Properties and Values API
4+
https://bugs.webkit.org/show_bug.cgi?id=189819
5+
6+
Reviewed by Simon Fraser.
7+
8+
* css-custom-properties-api/initialValue-expected.html: Added.
9+
* css-custom-properties-api/initialValue.html: Added.
10+
* css-custom-properties-api/initialValueJS-expected.txt: Added.
11+
* css-custom-properties-api/initialValueJS.html: Added.
12+
* css-custom-properties-api/registerProperty-expected.txt:
13+
* css-custom-properties-api/registerProperty.html:
14+
* platform/win/TestExpectations:
15+
116
2018-09-21 Ryan Haddad <[email protected]>
217

318
[macOS EWS] Layout test accessibility/smart-invert-reference.html is a flaky failure

‎LayoutTests/css-custom-properties-api/initialValue-expected.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html>
2+
<head>
3+
<style>
4+
html {
5+
background: grey;
6+
}
7+
.parent1 {
8+
width: 500px;
9+
background: blue;
10+
}
11+
.child1 {
12+
background: green;
13+
width: 100px;
14+
}
15+
16+
.parent2 {
17+
width: 500px;
18+
background: blue;
19+
}
20+
.child2 {
21+
background: green;
22+
width: 200px;
23+
}
24+
25+
.parent3 {
26+
width: 500px;
27+
background: blue;
28+
}
29+
.child3 {
30+
background: green;
31+
width: 500px;
32+
}
33+
34+
.parent4 {
35+
width: 500px;
36+
background: blue;
37+
}
38+
.child4 {
39+
background: green;
40+
width: 200px;
41+
}
42+
43+
.parent5 {
44+
width: 500px;
45+
background: blue;
46+
}
47+
.child5 {
48+
background: green;
49+
width: 300px;
50+
}
51+
52+
.parent6 {
53+
width: 500px;
54+
background: blue;
55+
}
56+
.child6 {
57+
background: green;
58+
width: 500px;
59+
}
60+
61+
.parent7 {
62+
width: 500px;
63+
background: blue;
64+
}
65+
.child7 {
66+
background: green;
67+
width: 500px;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<p> Single values </p>
73+
<p> Specified </p>
74+
<div class="parent1"><div class="child1"><p>100px green</p></div> </div>
75+
<p> Not specified, use initial value </p>
76+
<div class="parent2"><div class="child2"><p>200px green</p></div> </div>
77+
<p> Not specified, but not registered so use initial value for width </p>
78+
<div class="parent3"><div class="child3"><p>500px green</p></div> </div>
79+
<p> Has a fallback for registered property </p>
80+
<div class="parent4"><div class="child4"><p>200px green</p></div> </div>
81+
<p> Has a fallback for unregistered property </p>
82+
<div class="parent5"><div class="child5"><p>300px green</p></div> </div>
83+
<p> Having a fallback for a registered property that is a variable should not work</p>
84+
<div class="parent6"><div class="child6"><p>500px green</p></div> </div>
85+
<p> Having a variable in the initial value should not work</p>
86+
<div class="parent7"><div class="child7"><p>500px green</p></div> </div>
87+
</body>
88+
</html>

‎LayoutTests/css-custom-properties-api/initialValue.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<html>
2+
<head>
3+
<style>
4+
html {
5+
background: grey;
6+
}
7+
.parent1 {
8+
width: 500px;
9+
background: blue;
10+
}
11+
.child1 {
12+
background: green;
13+
--my-custom-prop: 100px;
14+
width: var(--my-custom-prop);
15+
}
16+
17+
.parent2 {
18+
width: 500px;
19+
background: blue;
20+
}
21+
.child2 {
22+
background: green;
23+
width: var(--my-custom-prop2);
24+
}
25+
26+
.parent3 {
27+
width: 500px;
28+
background: blue;
29+
}
30+
.child3 {
31+
background: green;
32+
width: var(--my-custom-prop3);
33+
}
34+
35+
.parent4 {
36+
width: 500px;
37+
background: blue;
38+
}
39+
.child4 {
40+
background: green;
41+
width: var(--my-custom-prop2, 300px);
42+
}
43+
44+
.parent5 {
45+
width: 500px;
46+
background: blue;
47+
}
48+
.child5 {
49+
background: green;
50+
width: var(--my-custom-prop3, 300px);
51+
}
52+
53+
.parent6 {
54+
width: 500px;
55+
background: blue;
56+
}
57+
.child6 {
58+
background: green;
59+
--my-custom-prop: 100px;
60+
width: var(--my-custom-prop3, --my-custom-prop1);
61+
}
62+
63+
.parent7 {
64+
width: 500px;
65+
background: blue;
66+
}
67+
.child7 {
68+
background: green;
69+
--my-custom-prop: 100px;
70+
width: var(--my-custom-prop4);
71+
}
72+
</style>
73+
<script>
74+
CSS.registerProperty({
75+
name: '--my-custom-prop',
76+
syntax: '<length>',
77+
inherits: false,
78+
initialValue: '200px'
79+
})
80+
81+
CSS.registerProperty({
82+
name: '--my-custom-prop2',
83+
syntax: '<length>',
84+
inherits: false,
85+
initialValue: '200px'
86+
})
87+
88+
CSS.registerProperty({
89+
name: '--my-custom-prop4',
90+
syntax: '<length>',
91+
inherits: false,
92+
initialValue: 'var(--my-custom-prop)'
93+
})
94+
</script>
95+
</head>
96+
<body>
97+
<p> Single values </p>
98+
<p> Specified </p>
99+
<div class="parent1"><div class="child1"><p>100px green</p></div> </div>
100+
<p> Not specified, use initial value </p>
101+
<div class="parent2"><div class="child2"><p>200px green</p></div> </div>
102+
<p> Not specified, but not registered so use initial value for width </p>
103+
<div class="parent3"><div class="child3"><p>500px green</p></div> </div>
104+
<p> Has a fallback for registered property </p>
105+
<div class="parent4"><div class="child4"><p>200px green</p></div> </div>
106+
<p> Has a fallback for unregistered property </p>
107+
<div class="parent5"><div class="child5"><p>300px green</p></div> </div>
108+
<p> Having a fallback for a registered property that is a variable should not work</p>
109+
<div class="parent6"><div class="child6"><p>500px green</p></div> </div>
110+
<p> Having a variable in the initial value should not work</p>
111+
<div class="parent7"><div class="child7"><p>500px green</p></div> </div>
112+
</body>
113+
</html>

‎LayoutTests/css-custom-properties-api/initialValueJS-expected.txt‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Specified
2+
3+
100px green
4+
5+
Not specified, use initial value
6+
7+
200px green
8+
9+
Not specified, but not registered so use initial value for width
10+
11+
500px green
12+
13+
Has a fallback for unregistered property
14+
15+
300px green
16+
17+
Has a fallback for a registered property
18+
19+
200px green
20+
21+
22+
PASS Registration is successful
23+
PASS JS Attributes are valid for element 1
24+
PASS JS Attributes are valid for element 2
25+
PASS JS Attributes are valid for element 3
26+
PASS JS Attributes are valid for element 4 and 5
27+

‎LayoutTests/css-custom-properties-api/initialValueJS.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] -->
2+
<!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html -->
3+
<script src="../resources/testharness.js"></script>
4+
<script src="../resources/testharnessreport.js"></script>
5+
6+
<style>
7+
#parent1 {
8+
width: 500px;
9+
background: blue;
10+
}
11+
#child1 {
12+
background: green;
13+
--my-custom-prop: 100px;
14+
width: var(--my-custom-prop);
15+
}
16+
17+
#parent2 {
18+
width: 500px;
19+
background: blue;
20+
}
21+
#child2 {
22+
background: green;
23+
width: var(--my-custom-prop2);
24+
}
25+
26+
#parent3 {
27+
width: 500px;
28+
background: blue;
29+
}
30+
#child3 {
31+
background: green;
32+
width: var(--my-custom-prop3);
33+
}
34+
35+
#parent4 {
36+
width: 500px;
37+
background: blue;
38+
}
39+
#child4 {
40+
background: green;
41+
width: var(--my-custom-prop3, 300px);
42+
}
43+
44+
#parent5 {
45+
width: 500px;
46+
background: blue;
47+
}
48+
#child5 {
49+
background: green;
50+
width: var(--my-custom-prop2, 300px);
51+
}
52+
</style>
53+
<div>
54+
<p> Specified </p>
55+
<div id="parent1"><div id="child1"><p>100px green</p></div> </div>
56+
<p> Not specified, use initial value </p>
57+
<div id="parent2"><div id="child2"><p>200px green</p></div> </div>
58+
<p> Not specified, but not registered so use initial value for width </p>
59+
<div id="parent3"><div id="child3"><p>500px green</p></div> </div>
60+
<p> Has a fallback for unregistered property </p>
61+
<div id="parent4"><div id="child4"><p>300px green</p></div> </div>
62+
<p> Has a fallback for a registered property </p>
63+
<div id="parent5"><div id="child5"><p>200px green</p></div> </div>
64+
</div>
65+
<script>
66+
67+
function test_prop(id, prop, expected) {
68+
assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected);
69+
}
70+
71+
test(function() {
72+
CSS.registerProperty({
73+
name: '--my-custom-prop',
74+
syntax: '<length>',
75+
inherits: false,
76+
initialValue: '200px'
77+
})
78+
79+
CSS.registerProperty({
80+
name: '--my-custom-prop2',
81+
syntax: '<length>',
82+
inherits: false,
83+
initialValue: '200px'
84+
})
85+
}, "Registration is successful");
86+
test(function() {
87+
test_prop('child1', 'width', '100px');
88+
test_prop('child1', '--my-custom-prop', '100px');
89+
test_prop('child1', '--my-custom-prop2', '200px');
90+
}, "JS Attributes are valid for element 1");
91+
test(function() {
92+
test_prop('child2', 'width', '200px');
93+
test_prop('child2', '--my-custom-prop', '200px');
94+
test_prop('child2', '--my-custom-prop2', '200px');
95+
}, "JS Attributes are valid for element 2");
96+
test(function() {
97+
test_prop('child3', 'width', '500px');
98+
test_prop('child3', '--my-custom-prop3', '');
99+
test_prop('child3', '--my-custom-prop2', '200px');
100+
}, "JS Attributes are valid for element 3");
101+
test(function() {
102+
test_prop('child4', 'width', '300px');
103+
test_prop('child5', 'width', '200px');
104+
test_prop('child4', '--my-custom-prop2', '200px');
105+
test_prop('child5', '--my-custom-prop2', '200px');
106+
}, "JS Attributes are valid for element 4 and 5");
107+
</script>

‎LayoutTests/css-custom-properties-api/registerProperty-expected.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
PASS registerProperty requires a Dictionary type
33
PASS registerProperty requires a name matching <custom-property-name>
4-
PASS registerProperty only allows omitting initialValue is syntax is '*'
4+
PASS registerProperty always allows omitting initialValue and syntax, requires name and inherits
5+
PASS registerProperty requires inherits and name
56

‎LayoutTests/css-custom-properties-api/registerProperty.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,23 @@
1818
CSS.registerProperty({name: '--name2, no need for escapes', inherits: false});
1919
CSS.registerProperty({name: ['--name', 3], inherits: false});
2020
// Invalid property names
21-
assert_throws(new TypeError(), () => CSS.registerProperty({}));
22-
assert_throws(new TypeError(), () => CSS.registerProperty({name: '--no-inherits'}));
2321
//assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash', inherits: false}));
2422
//assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '', inherits: false}));
2523
//assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name', inherits: false}));
2624
}, "registerProperty requires a name matching <custom-property-name>");
2725
test(function() {
2826
CSS.registerProperty({name: '--syntax-test-1', inherits: false, syntax: '*'});
2927
CSS.registerProperty({name: '--syntax-test-2', inherits: false, syntax: ' * '});
30-
/*assert_throws(new SyntaxError(),
31-
() => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length'}));*/
32-
}, "registerProperty only allows omitting initialValue is syntax is '*'");
28+
CSS.registerProperty({name: '--syntax-test-3', inherits: false, initialValue: '500px'});
29+
assert_throws(new TypeError(), () => CSS.registerProperty({}));
30+
assert_throws(new TypeError(), () => CSS.registerProperty({name: '--no-inherits'}));
31+
assert_throws(new TypeError(), () => CSS.registerProperty({inherits: false}));
32+
// Repeated name
33+
assert_throws(null,
34+
() => CSS.registerProperty({name: '--syntax-test-3', inherits: false, initialValue: '500px'}));
35+
}, "registerProperty always allows omitting initialValue and syntax, requires name and inherits");
36+
test(function() {
37+
CSS.registerProperty({name: '--syntax-test-4', inherits: false, syntax: '*'});
38+
CSS.registerProperty({name: '--syntax-test-5', inherits: false, syntax: ' * '});
39+
}, "registerProperty requires inherits and name");
3340
</script>

0 commit comments

Comments
 (0)