forked from WebKit/WebKit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinline.html
122 lines (106 loc) · 5.33 KB
/
inline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html -->
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#test1 {
--a: 10em;
--b: 10em;
}
</style>
<div>
<div id=test1><p>test</p></div>
</div>
<script>
var computedStyle = getComputedStyle(test1);
var inlineStyle = test1.style;
var sheetStyle = document.styleSheets[0].cssRules[0].style;
test(function() {
// Nothing registered yet, whatever you specify works
assert_equals(computedStyle.getPropertyValue('--a'), '10em');
assert_equals(computedStyle.getPropertyValue('--b'), '10em');
inlineStyle.setProperty('--a', 'hello');
inlineStyle.setProperty('--b', 'bonjour');
assert_equals(inlineStyle.getPropertyValue('--a'), 'hello');
assert_equals(inlineStyle.getPropertyValue('--b'), 'bonjour');
assert_equals(computedStyle.getPropertyValue('--a'), 'hello');
assert_equals(computedStyle.getPropertyValue('--b'), 'bonjour');
}, "CSSOM setters function as expected for unregistered properties");
test(function() {
CSS.registerProperty({name: '--a', syntax: '<length>', initialValue: '0px', inherits: false});
CSS.registerProperty({name: '--registered', syntax: '<length>', initialValue: '0px', inherits: false});
}, "CSS.registerProperty");
test(function() {
assert_equals(inlineStyle.getPropertyValue('--a'), 'hello');
assert_equals(inlineStyle.getPropertyValue('--b'), 'bonjour');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
assert_equals(computedStyle.getPropertyValue('--b'), 'bonjour');
}, "Formerly valid values are still readable from inline styles but are computed as the unset value");
test(function() {
inlineStyle.setProperty('--a', 'hi');
inlineStyle.setProperty('--b', 'hi');
assert_equals(inlineStyle.getPropertyValue('--a'), 'hi');
assert_equals(inlineStyle.getPropertyValue('--b'), 'hi');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
assert_equals(computedStyle.getPropertyValue('--b'), 'hi');
}, "Values not matching the registered type can be set.");
test(function() {
inlineStyle.removeProperty('--a');
inlineStyle.setProperty('--b', '');
assert_equals(inlineStyle.getPropertyValue('--a'), '');
assert_equals(inlineStyle.getPropertyValue('--b'), '');
assert_equals(computedStyle.getPropertyValue('--a'), '160px');
assert_equals(computedStyle.getPropertyValue('--b'), '10em');
}, "Values can be removed from inline styles");
test(function() {
sheetStyle.setProperty('--a', 'banana'); // Invalid, treated as initial value.
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
sheetStyle.setProperty('--a', '20px');
assert_equals(computedStyle.getPropertyValue('--a'), '20px');
sheetStyle.setProperty('--a', 'initial');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
}, "Stylesheets can be modified by CSSOM");
test(function() {
inlineStyle.setProperty('--a', '30em');
inlineStyle.setProperty('--b', '20em');
assert_equals(inlineStyle.getPropertyValue('--a'), '30em');
assert_equals(inlineStyle.getPropertyValue('--b'), '20em');
assert_equals(computedStyle.getPropertyValue('--a'), '480px');
assert_equals(computedStyle.getPropertyValue('--b'), '20em');
inlineStyle.setProperty('--a', 'inherit');
assert_equals(inlineStyle.getPropertyValue('--a'), 'inherit');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
}, "Valid values can be set on inline styles");
test(function() {
inlineStyle.setProperty('--b', '20px');
inlineStyle.setProperty('--a', 'calc(var(--b) + 10px)');
assert_equals(inlineStyle.getPropertyValue('--b'), '20px');
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) + 10px)');
assert_equals(computedStyle.getPropertyValue('--b'), '20px');
assert_equals(computedStyle.getPropertyValue('--a'), '30px');
}, "Var values are accepted");
test(function() {
inlineStyle.setProperty('--b', 'hello');
inlineStyle.setProperty('--a', 'calc(var(--b) + 15px)');
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) + 15px)');
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
}, "Var values are accepted without validation");
test(function() {
inlineStyle.setProperty('--b', 'hello');
inlineStyle.setProperty('--a', 'calc(var(--b) 15px)');
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) 15px)');
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
}, "Var values are accepted without validation, even when it is obvious they will not parse");
test(function() {
inlineStyle.setProperty('--b', 'hello');
inlineStyle.setProperty('--a', 'calc(var(--registered) 15px)');
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--registered) 15px)');
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
}, "Var values are accepted without validation, even when it is obvious they will not parse (typed)");
</script>