| 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 |