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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/variables/tricky-cycle-cases.html

Issue 1698203002: Simplify CSS variables resolution logic [1 of 2] (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: more tests Created 4 years, 10 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 | « no previous file | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../../../resources/testharness.js"></script> 2 <script src="../../../resources/testharness.js"></script>
3 <script src="../../../resources/testharnessreport.js"></script> 3 <script src="../../../resources/testharnessreport.js"></script>
4 <style> 4 <style>
5 div { 5 div {
6 width: 400px; 6 width: 400px;
7 height: 50px; 7 height: 50px;
8 margin-bottom: 5px; 8 margin-bottom: 5px;
9 } 9 }
10 10
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
92 background-color: var(--m, var(--o, green)); 92 background-color: var(--m, var(--o, green));
93 } 93 }
94 94
95 #secondarycycle_fallback_r { 95 #secondarycycle_fallback_r {
96 --n: var(--m, pink); 96 --n: var(--m, pink);
97 --m: var(--n, var(--o)); 97 --m: var(--n, var(--o));
98 --o: var(--m, red); 98 --o: var(--m, red);
99 background-color: orange; 99 background-color: orange;
100 background-color: var(--n, var(--o, green)); 100 background-color: var(--n, var(--o, green));
101 } 101 }
102
103 #twocycle_with_separate_fallback {
104 --a: var(--b) var(--c, red);
105 --b: var(--a) var(--c, red);
106 background-color: orange;
107 background-color: var(--a, green);
108 }
109
110 #linked_cycles_a {
111 --a: var(--b) var(--c, red);
112 --b: var(--a) var(--c, red);
113 --c: var(--a);
114 background-color: orange;
115 background-color: var(--a, green);
116 }
117
118 #linked_cycles_b {
119 --a: var(--b) var(--c, var(--d));
120 --b: var(--a) var(--c, red);
121 --d: var(--a);
122 background-color: orange;
123 background-color: var(--a, var(--d, green));
124 }
125
126 #fallback_self_reference_a {
127 --a: red;
128 --b: var(--a, var(--b));
129 --c: var(--b, green);
130 background-color: orange;
131 background-color: var(--c, red);
132 }
133
134 #fallback_self_reference_b {
135 --b: red;
136 --c: var(--b, var(--c));
137 --a: var(--c, green);
138 background-color: orange;
139 background-color: var(--a, red);
140 }
141
142 #fallback_self_reference_c {
143 --c: red;
144 --a: var(--c, var(--a));
145 --b: var(--a, green);
146 background-color: orange;
147 background-color: var(--b, red);
148 }
149
102 </style> 150 </style>
103 151
104 <div id=twocycleinfallback_a></div> 152 <div id=twocycleinfallback_a></div>
105 <div id=twocycleinfallback_ra></div> 153 <div id=twocycleinfallback_ra></div>
106 <div id=twocycleinfallback_b></div> 154 <div id=twocycleinfallback_b></div>
107 <div id=twocycleinfallback_rb></div> 155 <div id=twocycleinfallback_rb></div>
108 <div id=twocycleinchain_a></div> 156 <div id=twocycleinchain_a></div>
109 <div id=twocycleinchain_ra></div> 157 <div id=twocycleinchain_ra></div>
110 <div id=twocycleinchain_b></div> 158 <div id=twocycleinchain_b></div>
111 <div id=twocycleinchain_rb></div> 159 <div id=twocycleinchain_rb></div>
112 <div id=secondarycycle_chain></div> 160 <div id=secondarycycle_chain></div>
113 <div id=secondarycycle_chain_r></div> 161 <div id=secondarycycle_chain_r></div>
114 <div id=secondarycycle_fallback></div> 162 <div id=secondarycycle_fallback></div>
115 <div id=secondarycycle_fallback_r></div> 163 <div id=secondarycycle_fallback_r></div>
164 <div id=twocycle_with_separate_fallback></div>
165 <div id=linked_cycles_a></div>
166 <div id=linked_cycles_b></div>
167 <div id=fallback_self_reference_a></div>
168 <div id=fallback_self_reference_b></div>
169 <div id=fallback_self_reference_c></div>
116 170
117 <script> 171 <script>
118 test(function() { 172 test(function() {
119 assert_equals(getComputedStyle(twocycleinfallback_a).backgroundColor, 'rgb(0, 128, 0)'); 173 assert_equals(getComputedStyle(twocycleinfallback_a).backgroundColor, 'rgb(0, 128, 0)');
120 assert_equals(getComputedStyle(twocycleinfallback_ra).backgroundColor, 'rgb(0, 128, 0)'); 174 assert_equals(getComputedStyle(twocycleinfallback_ra).backgroundColor, 'rgb(0, 128, 0)');
121 }, 'A cycle is still invalid if it uses fallbacks (fallback forced)'); 175 }, 'A cycle is still invalid if it uses fallbacks (fallback forced)');
122 176
123 test(function() { 177 test(function() {
124 assert_equals(getComputedStyle(twocycleinfallback_b).backgroundColor, 'rgb(0, 128, 0)'); 178 assert_equals(getComputedStyle(twocycleinfallback_b).backgroundColor, 'rgb(0, 128, 0)');
125 assert_equals(getComputedStyle(twocycleinfallback_rb).backgroundColor, 'rgb(0, 128, 0)'); 179 assert_equals(getComputedStyle(twocycleinfallback_rb).backgroundColor, 'rgb(0, 128, 0)');
(...skipping 11 matching lines...) Expand all
137 191
138 test(function() { 192 test(function() {
139 assert_equals(getComputedStyle(secondarycycle_chain).backgroundColor, 'rgb(0, 128, 0)'); 193 assert_equals(getComputedStyle(secondarycycle_chain).backgroundColor, 'rgb(0, 128, 0)');
140 assert_equals(getComputedStyle(secondarycycle_chain_r).backgroundColor, 'rgb(0 , 128, 0)'); 194 assert_equals(getComputedStyle(secondarycycle_chain_r).backgroundColor, 'rgb(0 , 128, 0)');
141 }, 'Secondary cycles need to be detected too (secondary cycle in chain)'); 195 }, 'Secondary cycles need to be detected too (secondary cycle in chain)');
142 196
143 test(function() { 197 test(function() {
144 assert_equals(getComputedStyle(secondarycycle_fallback).backgroundColor, 'rgb( 0, 128, 0)'); 198 assert_equals(getComputedStyle(secondarycycle_fallback).backgroundColor, 'rgb( 0, 128, 0)');
145 assert_equals(getComputedStyle(secondarycycle_fallback_r).backgroundColor, 'rg b(0, 128, 0)'); 199 assert_equals(getComputedStyle(secondarycycle_fallback_r).backgroundColor, 'rg b(0, 128, 0)');
146 }, 'Secondary cycles need to be detected too (secondary cycle in fallback)'); 200 }, 'Secondary cycles need to be detected too (secondary cycle in fallback)');
201
202 test(function() {
203 assert_equals(getComputedStyle(twocycle_with_separate_fallback).backgroundColo r, 'rgb(0, 128, 0)');
204 }, 'A cycle is not affected by other variable references with fallbacks');
205
206 test(function() {
207 assert_equals(getComputedStyle(linked_cycles_a).backgroundColor, 'rgb(0, 128, 0)');
208 assert_equals(getComputedStyle(linked_cycles_b).backgroundColor, 'rgb(0, 128, 0)');
209 }, 'Cycles which are linked are invalid');
210
211 test(function() {
212 assert_equals(getComputedStyle(fallback_self_reference_a).backgroundColor, 'rg b(0, 128, 0)');
213 assert_equals(getComputedStyle(fallback_self_reference_b).backgroundColor, 'rg b(0, 128, 0)');
214 assert_equals(getComputedStyle(fallback_self_reference_c).backgroundColor, 'rg b(0, 128, 0)');
215 }, 'A self-reference in a fallback is invalid');
147 </script> 216 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698