diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-variables/variable-cycles.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-variables/variable-cycles.html | 419 |
1 files changed, 419 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-variables/variable-cycles.html b/testing/web-platform/tests/css/css-variables/variable-cycles.html new file mode 100644 index 0000000000..950cffb2ab --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-cycles.html @@ -0,0 +1,419 @@ +<!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> |