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

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: 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
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 }
102 </style> 109 </style>
103 110
104 <div id=twocycleinfallback_a></div> 111 <div id=twocycleinfallback_a></div>
105 <div id=twocycleinfallback_ra></div> 112 <div id=twocycleinfallback_ra></div>
106 <div id=twocycleinfallback_b></div> 113 <div id=twocycleinfallback_b></div>
107 <div id=twocycleinfallback_rb></div> 114 <div id=twocycleinfallback_rb></div>
108 <div id=twocycleinchain_a></div> 115 <div id=twocycleinchain_a></div>
109 <div id=twocycleinchain_ra></div> 116 <div id=twocycleinchain_ra></div>
110 <div id=twocycleinchain_b></div> 117 <div id=twocycleinchain_b></div>
111 <div id=twocycleinchain_rb></div> 118 <div id=twocycleinchain_rb></div>
112 <div id=secondarycycle_chain></div> 119 <div id=secondarycycle_chain></div>
113 <div id=secondarycycle_chain_r></div> 120 <div id=secondarycycle_chain_r></div>
114 <div id=secondarycycle_fallback></div> 121 <div id=secondarycycle_fallback></div>
115 <div id=secondarycycle_fallback_r></div> 122 <div id=secondarycycle_fallback_r></div>
123 <div id=twocycle_with_separate_fallback></div>
116 124
117 <script> 125 <script>
118 test(function() { 126 test(function() {
119 assert_equals(getComputedStyle(twocycleinfallback_a).backgroundColor, 'rgb(0, 128, 0)'); 127 assert_equals(getComputedStyle(twocycleinfallback_a).backgroundColor, 'rgb(0, 128, 0)');
120 assert_equals(getComputedStyle(twocycleinfallback_ra).backgroundColor, 'rgb(0, 128, 0)'); 128 assert_equals(getComputedStyle(twocycleinfallback_ra).backgroundColor, 'rgb(0, 128, 0)');
121 }, 'A cycle is still invalid if it uses fallbacks (fallback forced)'); 129 }, 'A cycle is still invalid if it uses fallbacks (fallback forced)');
122 130
123 test(function() { 131 test(function() {
124 assert_equals(getComputedStyle(twocycleinfallback_b).backgroundColor, 'rgb(0, 128, 0)'); 132 assert_equals(getComputedStyle(twocycleinfallback_b).backgroundColor, 'rgb(0, 128, 0)');
125 assert_equals(getComputedStyle(twocycleinfallback_rb).backgroundColor, 'rgb(0, 128, 0)'); 133 assert_equals(getComputedStyle(twocycleinfallback_rb).backgroundColor, 'rgb(0, 128, 0)');
(...skipping 11 matching lines...) Expand all
137 145
138 test(function() { 146 test(function() {
139 assert_equals(getComputedStyle(secondarycycle_chain).backgroundColor, 'rgb(0, 128, 0)'); 147 assert_equals(getComputedStyle(secondarycycle_chain).backgroundColor, 'rgb(0, 128, 0)');
140 assert_equals(getComputedStyle(secondarycycle_chain_r).backgroundColor, 'rgb(0 , 128, 0)'); 148 assert_equals(getComputedStyle(secondarycycle_chain_r).backgroundColor, 'rgb(0 , 128, 0)');
141 }, 'Secondary cycles need to be detected too (secondary cycle in chain)'); 149 }, 'Secondary cycles need to be detected too (secondary cycle in chain)');
142 150
143 test(function() { 151 test(function() {
144 assert_equals(getComputedStyle(secondarycycle_fallback).backgroundColor, 'rgb( 0, 128, 0)'); 152 assert_equals(getComputedStyle(secondarycycle_fallback).backgroundColor, 'rgb( 0, 128, 0)');
145 assert_equals(getComputedStyle(secondarycycle_fallback_r).backgroundColor, 'rg b(0, 128, 0)'); 153 assert_equals(getComputedStyle(secondarycycle_fallback_r).backgroundColor, 'rg b(0, 128, 0)');
146 }, 'Secondary cycles need to be detected too (secondary cycle in fallback)'); 154 }, 'Secondary cycles need to be detected too (secondary cycle in fallback)');
155
156 test(function() {
157 assert_equals(getComputedStyle(twocycle_with_separate_fallback).backgroundColo r, 'rgb(0, 128, 0)');
158 }, 'A cycle is not affected by other variable references with fallbacks');
147 </script> 159 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698