<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
div {
width: 400px;
height: 50px;
margin-bottom: 5px;
}
#twocycleinfallback_a {
--a: var(--b, red);
--b: var(--not-defined, var(--a));
background-color: orange;
background-color: var(--a, green);
}
#twocycleinfallback_ra {
--b: var(--a, red);
--a: var(--not-defined, var(--b));
background-color: orange;
background-color: var(--b, green);
}
#twocycleinfallback_b {
--c: var(--d, red);
--d: var(--e, var(--c));
--e: yellow;
background-color: orange;
background-color: var(--d, green);
}
#twocycleinfallback_rb {
--d: var(--c, red);
--c: var(--e, var(--d));
--e: yellow;
background-color: orange;
background-color: var(--c, green);
}
#twocycleinchain_a {
--e: var(--f) red;
--f: var(--not-defined) var(--e);
background-color: orange;
background-color: var(--f, green);
}
#twocycleinchain_ra {
--f: var(--e) red;
--e: var(--not-defined) var(--f);
background-color: orange;
background-color: var(--e, green);
}
#twocycleinchain_b {
--g: var(--h) red;
--h: var(--i) var(--g);
--i: ;
background-color: orange;
background-color: var(--h, green);
}
#twocycleinchain_rb {
--h: var(--g) red;
--g: var(--i) var(--h);
--i: ;
background-color: orange;
background-color: var(--g, green);
}
#secondarycycle_chain {
--j: var(--k, pink);
--k: var(--j) var(--l);
--l: var(--k, red);
background-color: orange;
background-color: var(--j, var(--l, green));
}
#secondarycycle_chain_r {
--k: var(--j, pink);
--j: var(--k) var(--l);
--l: var(--j, red);
background-color: orange;
background-color: var(--k, var(--l, green));
}
#secondarycycle_fallback {
--m: var(--n, pink);
--n: var(--m, var(--o));
--o: var(--n, red);
background-color: orange;
background-color: var(--m, var(--o, green));
}
#secondarycycle_fallback_r {
--n: var(--m, pink);
--m: var(--n, var(--o));
--o: var(--m, red);
background-color: orange;
background-color: var(--n, var(--o, green));
}
#twocycle_with_separate_fallback {
--a: var(--b) var(--c, red);
--b: var(--a) var(--c, red);
background-color: orange;
background-color: var(--a, green);
}
#linked_cycles_a {
--a: var(--b) var(--c, red);
--b: var(--a) var(--c, red);
--c: var(--a);
background-color: orange;
background-color: var(--a, green);
}
#linked_cycles_b {
--a: var(--b) var(--c, var(--d));
--b: var(--a) var(--c, red);
--d: var(--a);
background-color: orange;
background-color: var(--a, var(--d, green));
}
#fallback_self_reference_a {
--a: red;
--b: var(--a, var(--b));
--c: var(--b, green);
background-color: orange;
background-color: var(--c, red);
}
#fallback_self_reference_b {
--b: red;
--c: var(--b, var(--c));
--a: var(--c, green);
background-color: orange;
background-color: var(--a, red);
}
#fallback_self_reference_c {
--c: red;
--a: var(--c, var(--a));
--b: var(--a, green);
background-color: orange;
background-color: var(--b, red);
}
</style>
<div id=twocycleinfallback_a></div>
<div id=twocycleinfallback_ra></div>
<div id=twocycleinfallback_b></div>
<div id=twocycleinfallback_rb></div>
<div id=twocycleinchain_a></div>
<div id=twocycleinchain_ra></div>
<div id=twocycleinchain_b></div>
<div id=twocycleinchain_rb></div>
<div id=secondarycycle_chain></div>
<div id=secondarycycle_chain_r></div>
<div id=secondarycycle_fallback></div>
<div id=secondarycycle_fallback_r></div>
<div id=twocycle_with_separate_fallback></div>
<div id=linked_cycles_a></div>
<div id=linked_cycles_b></div>
<div id=fallback_self_reference_a></div>
<div id=fallback_self_reference_b></div>
<div id=fallback_self_reference_c></div>
<script>
test(function() {
assert_equals(getComputedStyle(twocycleinfallback_a).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(twocycleinfallback_ra).backgroundColor, 'rgb(0, 128, 0)');
}, 'A cycle is still invalid if it uses fallbacks (fallback forced)');
test(function() {
assert_equals(getComputedStyle(twocycleinfallback_b).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(twocycleinfallback_rb).backgroundColor, 'rgb(0, 128, 0)');
}, 'A cycle is still invalid if it uses fallbacks (fallback not taken)');
test(function() {
assert_equals(getComputedStyle(twocycleinchain_a).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(twocycleinchain_ra).backgroundColor, 'rgb(0, 128, 0)');
}, 'A cycle is still invalid if it uses chains (A)');
test(function() {
assert_equals(getComputedStyle(twocycleinchain_b).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(twocycleinchain_rb).backgroundColor, 'rgb(0, 128, 0)');
}, 'A cycle is still invalid if it uses chains (B)');
test(function() {
assert_equals(getComputedStyle(secondarycycle_chain).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(secondarycycle_chain_r).backgroundColor, 'rgb(0, 128, 0)');
}, 'Secondary cycles need to be detected too (secondary cycle in chain)');
test(function() {
assert_equals(getComputedStyle(secondarycycle_fallback).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(secondarycycle_fallback_r).backgroundColor, 'rgb(0, 128, 0)');
}, 'Secondary cycles need to be detected too (secondary cycle in fallback)');
test(function() {
assert_equals(getComputedStyle(twocycle_with_separate_fallback).backgroundColor, 'rgb(0, 128, 0)');
}, 'A cycle is not affected by other variable references with fallbacks');
test(function() {
assert_equals(getComputedStyle(linked_cycles_a).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(linked_cycles_b).backgroundColor, 'rgb(0, 128, 0)');
}, 'Cycles which are linked are invalid');
test(function() {
assert_equals(getComputedStyle(fallback_self_reference_a).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(fallback_self_reference_b).backgroundColor, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(fallback_self_reference_c).backgroundColor, 'rgb(0, 128, 0)');
}, 'A self-reference in a fallback is invalid');
</script>
Codebase Browser
chromium