Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(280)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html

Issue 2358203003: CSS Properties and Values API: Use initial value where appropriate for var() (Closed)
Patch Set: bla Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html ('k') | third_party/WebKit/Source/core/css/CSSSyntaxDescriptor.h » ('j') | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE HTML>
2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script>
4
5 <style>
6 #test1 {
7 --registered-1-a: var(--registered-1-b, 10px);
8 --registered-1-b: var(--registered-1-a, 20px);
9
10 --registered-1-c: var(--registered-1-b, 30px);
11 --registered-1-d: var(--registered-1-b);
12 --unregistered-1-a:var(--registered-1-a,40px);
13 --unregistered-1-a:var(--registered-1-a);
14 left: var(--registered-1-a, 50px);
15 top: var(--registered-1-b, 60px);
16 }
17 </style>
18 <div id=test1></div>
19 <script>
20 test(function() {
21 CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialV alue: '1px'});
22 CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialV alue: '2px'});
23 CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialV alue: '3px'});
24 CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialV alue: '4px'});
25
26 computedStyle = getComputedStyle(test1);
27 assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
28 assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px');
29
30 assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px');
31 assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px');
32 assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px');
33 assert_equals(computedStyle.left, '1px');
34 assert_equals(computedStyle.top, '2px');
35 }, "A var() cycle between two registered properties is handled correctly.");
36 </script>
37
38 <style>
39 #test2 {
40 --registered-2-a: var(--unregistered-2-a, 10px);
41 --unregistered-2-a:var(--registered-2-a,20px);
42
43 --registered-2-b: var(--registered-2-a, 30px);
44 --registered-2-c: var(--registered-2-a);
45 --registered-2-d: var(--unregistered-2-a, 40px);
46 --registered-2-e: var(--unregistered-2-a);
47 --unregistered-2-b:var(--registered-2-a,50px);
48 --unregistered-2-c:var(--registered-2-a);
49 --unregistered-2-d:var(--unregistered-2-a,60px);
50 --unregistered-2-e:var(--unregistered-2-a);
51 left: var(--registered-2-a, 70px);
52 top: var(--unregistered-2-a, 80px);
53 }
54 </style>
55 <div id=test2></div>
56 <script>
57 test(function() {
58 CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialV alue: '1px'});
59 CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialV alue: '2px'});
60 CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialV alue: '3px'});
61 CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialV alue: '4px'});
62 CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialV alue: '5px'});
63
64 computedStyle = getComputedStyle(test2);
65 assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
66 assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), '');
67
68 assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px');
69 assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px');
70 assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
71 assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px');
72 assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px');
73 assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px');
74 assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px');
75 assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), '');
76 assert_equals(computedStyle.left, '1px');
77 assert_equals(computedStyle.top, '80px');
78 }, "A var() cycle between a registered properties and an unregistered property i s handled correctly.");
79 </script>
80
81 <style>
82 #test3 {
83 --unregistered-3-a:var(--unregistered-3-b,10px);
84 --unregistered-3-b:var(--unregistered-3-a,20px);
85
86 --registered-3-a: var(--unregistered-3-a, 30px);
87 --registered-3-b: var(--unregistered-3-a);
88 --registered-3-c: var(--unregistered-3-b, 40px);
89 --registered-3-d: var(--registered-3-c, 50px);
90 left: var(--registered-3-d, 60px);
91 top: var(--registered-3-b, 70px);
92 }
93 </style>
94 <div id=test3></div>
95 <script>
96 test(function() {
97 CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialV alue: '1px'});
98 CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialV alue: '2px'});
99 CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialV alue: '3px'});
100 CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialV alue: '4px'});
101
102 computedStyle = getComputedStyle(test3);
103 assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), '');
104 assert_equals(computedStyle.getPropertyValue('--unregistered-3-b'), '');
105
106 assert_equals(computedStyle.getPropertyValue('--registered-3-a'), '30px');
107 assert_equals(computedStyle.getPropertyValue('--registered-3-b'), '2px');
108 assert_equals(computedStyle.getPropertyValue('--registered-3-c'), '40px');
109 assert_equals(computedStyle.getPropertyValue('--registered-3-d'), '40px');
110 assert_equals(computedStyle.left, '40px');
111 assert_equals(computedStyle.top, '2px');
112 }, "A var() cycle between a two unregistered properties is handled correctly.");
113 </script>
114
115 <style>
116 #test4 {
117 --registered-4-a:var(--unregistered-4-a,hello);
118 --unregistered-4-a:var(--registered-4-a,world);
119
120 --registered-4-b:var(--unregistered-4-a,meow);
121 --registered-4-c:var(--unregistered-4-a);
122 --unregistered-4-b:var(--unregistered-4-a,woof);
123 --unregistered-4-c:var(--unregistered-4-a);
124 transition-property: var(--registered-4-a, water);
125 }
126 </style>
127 <div id=test4></div>
128 <script>
129 test(function() {
130 CSS.registerProperty({name: '--registered-4-a', syntax: '*'});
131 CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: ' moo'});
132 CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: ' circle'});
133
134 computedStyle = getComputedStyle(test4);
135 assert_equals(computedStyle.getPropertyValue('--registered-4-a'), '');
136 assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), '');
137
138 assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow');
139 assert_equals(computedStyle.getPropertyValue('--registered-4-c'), 'circle');
140 assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof');
141 assert_equals(computedStyle.getPropertyValue('--unregistered-4-c'), '');
142 assert_equals(computedStyle.transitionProperty, 'water');
143 }, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
144 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html ('k') | third_party/WebKit/Source/core/css/CSSSyntaxDescriptor.h » ('j') | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698