mirror of
https://github.com/servo/servo.git
synced 2025-06-24 17:14:33 +01:00
419 lines
9.9 KiB
HTML
419 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf8">
|
|
<title>Test that custom property cycles behave correctly</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-variables/#cycles">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<main id=main></main>
|
|
<script>
|
|
|
|
// Test that, for the given list of |declarations|, the computed values
|
|
// of properties listed in |expected_invalid| are invalid (i.e. empty string),
|
|
// and the computed values listed in |expected_valid| are *not* invalid
|
|
// (i.e. not the empty string).
|
|
function test_cycles(declarations, expected_invalid, expected_valid, description) {
|
|
test(() => {
|
|
let element = document.createElement('div');
|
|
|
|
try {
|
|
declarations.push('--sanity:valid');
|
|
element.style = declarations.join(';');
|
|
main.append(element);
|
|
let cs = getComputedStyle(element);
|
|
|
|
for (let e of expected_invalid)
|
|
assert_equals(cs.getPropertyValue(e), '', `${e}`);
|
|
for (let e of expected_valid)
|
|
assert_not_equals(cs.getPropertyValue(e), '', `${e}`);
|
|
|
|
assert_equals(cs.getPropertyValue('--sanity'), 'valid', '--sanity');
|
|
|
|
} finally {
|
|
element.remove();
|
|
}
|
|
}, description);
|
|
}
|
|
|
|
// (Diagrams produced with graph-easy).
|
|
|
|
// ┌───┐
|
|
// │ │ ───┐
|
|
// │ a │ │
|
|
// │ │ ◀──┘
|
|
// └───┘
|
|
test_cycles(
|
|
['--a:var(--a)'],
|
|
['--a'],
|
|
[],
|
|
'Self-cycle');
|
|
|
|
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ b │ ─┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--a:var(--b)',
|
|
'--b:var(--a)',
|
|
],
|
|
['--a', '--b'],
|
|
[],
|
|
'Simple a/b cycle');
|
|
|
|
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ b │ │
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ ─┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle)',
|
|
'--c:var(--a, cycle)',
|
|
],
|
|
['--a', '--b', '--c'],
|
|
[],
|
|
'Three-var cycle');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ y │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ b │ │
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ ─┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--y, valid)',
|
|
'--y:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle)',
|
|
'--c:var(--a, cycle)',
|
|
],
|
|
['--a', '--b', '--c'],
|
|
['--x', '--y'],
|
|
'Cycle that starts in the middle of a chain');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ b │ │
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ ─┘
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ y │
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle)',
|
|
'--c:var(--a, cycle) var(--y)',
|
|
'--y:valid'
|
|
],
|
|
['--a', '--b', '--c'],
|
|
['--x', '--y'],
|
|
'Cycle with extra edge');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ ┌───┐ │
|
|
// │ y │ ◀── │ b │ │
|
|
// └───┘ └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ ─┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle) var(--y)',
|
|
'--c:var(--a, cycle)',
|
|
'--y:valid'
|
|
],
|
|
['--a', '--b', '--c'],
|
|
['--x', '--y'],
|
|
'Cycle with extra edge (2)');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ b │ │
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ ─┘
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ y │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ z │
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle)',
|
|
'--c:var(--a, cycle) var(--y)',
|
|
'--y:var(--z)',
|
|
'--z:valid'
|
|
],
|
|
['--a', '--b', '--c'],
|
|
['--x', '--y', '--z'],
|
|
'Cycle with extra edge (3)');
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// ┌▶ │ b │ ─┘
|
|
// │ └───┘
|
|
// │ │
|
|
// │ │
|
|
// │ ▼
|
|
// │ ┌───┐
|
|
// │ │ c │
|
|
// │ └───┘
|
|
// │ │
|
|
// │ │
|
|
// │ ▼
|
|
// │ ┌───┐
|
|
// └─ │ d │
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle) var(--a, cycle)',
|
|
'--c:var(--d, cycle)',
|
|
'--d:var(--b, cycle)',
|
|
],
|
|
['--a', '--b', '--c', '--d'],
|
|
['--x'],
|
|
'Cycle with secondary cycle');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ a │ ◀┐
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// ┌▶ │ b │ │
|
|
// │ └───┘ │
|
|
// │ │ │
|
|
// │ │ │
|
|
// │ ▼ │
|
|
// │ ┌───┐ │
|
|
// │ │ c │ ─┘
|
|
// │ └───┘
|
|
// │ │
|
|
// │ │
|
|
// │ ▼
|
|
// │ ┌───┐
|
|
// └─ │ d │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// │ y │
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle)',
|
|
'--b:var(--c, cycle)',
|
|
'--c:var(--d, cycle) var(--a, cycle)',
|
|
'--d:var(--b, cycle) var(--y)',
|
|
'--y:valid'
|
|
],
|
|
['--a', '--b', '--c', '--d'],
|
|
['--x', '--y'],
|
|
'Cycle with overlapping secondary cycle');
|
|
|
|
|
|
// ┌──────────────┐
|
|
// │ │
|
|
// │ ┌───┐ │
|
|
// │ │ x │ │
|
|
// │ └───┘ │
|
|
// │ │ │
|
|
// │ │ │
|
|
// │ ▼ ▼
|
|
// ┌───┐ ┌────────┐ ┌───┐
|
|
// │ b │ ◀── │ a │ ──▶ │ y │
|
|
// └───┘ └────────┘ └───┘
|
|
// │ ▲
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ c │ │
|
|
// └───┘ │
|
|
// │ │
|
|
// │ │
|
|
// ▼ │
|
|
// ┌───┐ │
|
|
// │ d │ ─┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--b, cycle) var(--y, valid) var(--c, cycle)',
|
|
'--b:var(--a, cycle) ',
|
|
'--c:var(--d, cycle)',
|
|
'--d:var(--a, cycle)',
|
|
'--y:valid',
|
|
],
|
|
['--a', '--b', '--c', '--d'],
|
|
['--x', '--y'],
|
|
'Cycle with deeper secondary cycle');
|
|
|
|
|
|
// ┌───┐
|
|
// │ x │
|
|
// └───┘
|
|
// │
|
|
// │
|
|
// ▼
|
|
// ┌───┐
|
|
// ┌─────▶ │ a │ ─┐
|
|
// │ └───┘ │
|
|
// │ │ │
|
|
// │ │ │
|
|
// │ ▼ │
|
|
// │ ┌───┐ │
|
|
// │ ┌─ │ b │ │
|
|
// │ │ └───┘ │
|
|
// │ │ │ │
|
|
// │ │ │ │
|
|
// │ │ ▼ │
|
|
// │ │ ┌───┐ │
|
|
// └────┼─ │ c │ │
|
|
// │ └───┘ │
|
|
// │ │ │
|
|
// │ │ │
|
|
// │ ▼ │
|
|
// │ ┌───┐ │
|
|
// └▶ │ y │ ◀┘
|
|
// └───┘
|
|
test_cycles(
|
|
[
|
|
'--x:var(--a, valid)',
|
|
'--a:var(--y, var(--b, cycle))',
|
|
'--b:var(--y, var(--c, cycle))',
|
|
'--c:var(--y, var(--a, cycle))',
|
|
'--y:valid'
|
|
],
|
|
['--a', '--b', '--c'],
|
|
['--x', '--y'],
|
|
'Cycle via fallback');
|
|
|
|
</script>
|