Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 5b5e754

Browse filesBrowse 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 <justin_michaud@apple.com> 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
Copy full SHA for 5b5e754

24 files changed

+471-44Lines changed: 471 additions & 44 deletions
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎LayoutTests/ChangeLog‎

Copy file name to clipboardExpand all lines: LayoutTests/ChangeLog
+15Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
2018-09-21 Justin Michaud <justin_michaud@apple.com>
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 <ryanhaddad@apple.com>
217

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

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

Copy file name to clipboard
+88Lines 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>
Collapse file

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

Copy file name to clipboard
+113Lines 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>
Collapse file

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

Copy file name to clipboard
+27Lines 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+
Collapse file

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

Copy file name to clipboard
+107Lines 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>
Collapse file

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

Copy file name to clipboard
+2-1Lines 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

Collapse file

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

Copy file name to clipboardExpand all lines: LayoutTests/css-custom-properties-api/registerProperty.html
+12-5Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.