OLD | NEW |
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 Loading... |
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 Loading... |
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> |
OLD | NEW |