diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/layer-basic.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/layer-basic.html | 524 |
1 files changed, 524 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/layer-basic.html b/testing/web-platform/tests/css/css-cascade/layer-basic.html new file mode 100644 index 0000000000..e214bffc25 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/layer-basic.html @@ -0,0 +1,524 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Cascade Layers: Basic functionality</title> +<meta name="assert" content="Basic functionality of CSS Cascade Layers"> +<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<target class="first"></target> +<target class="second"></target> +<div id="log"></div> +<script> + +// In all test cases, the rule specified as "color: green" should win. +var testCases = [ + { + title: 'A1 Anonymous layers', + style: ` + @layer { } + target { color: green; } + `, + }, + { + title: 'A2 Anonymous layers', + style: ` + target { color: green; } + @layer { + target { color: red; } + } + `, + }, + { + title: 'A3 Anonymous layers', + style: ` + @layer { + target { color: red; } + } + target { color: green; } + `, + }, + { + title: 'A4 Anonymous layers', + style: ` + @layer { + target { color: red; } + } + @layer { + target { color: green; } + } + `, + }, + { + title: 'A5 Anonymous layers', + style: ` + @layer { + target { color: green; } + @layer { + target { color: red; } + } + } + `, + }, + { + title: 'A6 Anonymous layers', + style: ` + @layer { + @layer { + target { color: red; } + } + target { color: green; } + } + `, + }, + { + title: 'A7 Anonymous layers', + style: ` + @layer { + @layer { + target { color: red; } + } + target { color: red; } + } + @layer { + @layer { + target { color: red; } + } + target { color: green; } + } + `, + }, + { + title: 'A8 Anonymous layers', + style: ` + @layer { + @layer { + @layer { + target { color: red; } + } + } + target { color: red; } + } + @layer { + @layer { + target { color: red; } + } + target { color: green; } + } + `, + }, + { + title: 'A9 Anonymous layers', + style: ` + @layer { + @layer { + target { color: red; } + } + target { color: red; } + } + @layer { + @layer { + @layer { + target { color: red; } + } + } + target { color: green; } + } + `, + }, + { + title: 'B1 Named layers', + style: ` + @layer A { + } + target { color: green; } + `, + }, + { + title: 'B2 Named layers', + style: ` + @layer A { + target { color: red; } + } + target { color: green; } + `, + }, + { + title: 'B3 Named layers', + style: ` + @layer A { + target { color: red; } + } + @layer A { + target { color: green; } + } + `, + }, + { + title: 'B4 Named layers', + style: ` + @layer A { + target { color: red; } + } + @layer B { + target { color: green; } + } + @layer A { + target { color: red; } + } + `, + }, + { + title: 'B5 Named layers', + style: ` + @layer A { + target { color: green; } + @layer A { + target { color: red; } + } + } + `, + }, + { + title: 'B6 Named layers', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer A { + @layer A { + target { color: green; } + } + } + `, + }, + { + title: 'B7 Named layers', + style: ` + @layer A { + target { color: red; } + @layer A { + target { color: red; } + } + } + @layer B { + target { color: green; } + } + @layer A { + @layer A { + target { color: red; } + } + } + `, + }, + { + title: 'B8 Named layers', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer B { + @layer A { + target { color: green; } + } + } + `, + }, + { + title: 'B9 Named layers', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer B { + @layer A { + target.first { color: green; } + } + } + @layer A { + @layer A { + target.first { color: red; } + target.second { color: green; } + } + } + `, + }, + { + title: 'B10 Named layers', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer B { + @layer A { + target.first { color: green; } + } + } + @layer A { + @layer B { + target.first { color: red; } + target.second { color: green; } + } + } + `, + }, + { + title: 'C1 Named layers shorthand', + style: ` + @layer A.A { + target { color: red; } + } + @layer B.A { + target { color: green; } + } + `, + }, + { + title: 'C2 Named layers shorthand', + style: ` + @layer A.A { + target { color: red; } + } + @layer B.A { + target.first { color: green; } + } + @layer A.A { + target.first { color: red; } + target.second { color: green; } + } + `, + }, + { + title: 'C3 Named layers shorthand', + style: ` + @layer A.A { + target { color: red; } + } + @layer B.A { + target.first { color: green; } + } + @layer A.B { + target.first { color: red; } + target.second { color: green; } + } + `, + }, + { + title: 'C4 Named layers shorthand', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer B.A { + target { color: green; } + } + @layer A.A + target { color: red; } + } + `, + }, + { + title: 'C5 Named layers shorthand', + style: ` + @layer A { + @layer A { + target { color: red; } + } + } + @layer B.A { + target { color: green; } + } + @layer A.B { + target { color: red; } + } + `, + }, + { + title: 'D1 Mixed named and anonymous layers', + style: ` + @layer A { + target { color: red; } + } + @layer { + target { color: green; } + } + `, + }, + { + title: 'D2 Mixed named and anonymous layers', + style: ` + @layer A { + @layer { + target { color: red; } + } + } + @layer A { + target { color: green; } + } + `, + }, + { + title: 'D3 Mixed named and anonymous layers', + style: ` + @layer A { + @layer { + target { color: red; } + } + } + @layer A { + @layer { + target { color: green; } + } + } + `, + }, + { + title: 'D4 Mixed named and anonymous layers', + style: ` + @layer A { + @layer { + target { color: red; } + } + } + @layer { + target { color: green; } + } + @layer A { + @layer { + target { color: red; } + } + } + `, + }, + { + title: 'D5 Mixed named and anonymous layers', + style: ` + @layer { + @layer A { + target { color: red; } + } + } + @layer { + target { color: green; } + } + `, + }, + { + title: 'E1 Statement syntax', + style: ` + @layer A, B, C; + @layer A { + target.first { color: red; } + target.second { color: red; } + } + @layer B { + target.first { color: red; } + } + @layer C { + target.first { color: green; } + target.second { color: green; } + } + `, + }, + { + title: 'E2 Statement syntax', + style: ` + @layer A, C, B; + @layer A { + target.first { color: red; } + target.second { color: red; } + } + @layer B { + target.first { color: green; } + } + @layer C { + target.first { color: red; } + target.second { color: green; } + } + `, + }, + { + title: 'E3 Statement syntax', + style: ` + @layer C, B, A; + @layer A { + target.first { color: green; } + target.second { color: green; } + } + @layer B { + target.first { color: red; } + } + @layer C { + target.first { color: red; } + target.second { color: red; } + } + `, + }, + { + title: 'E4 Statement syntax', + style: ` + @layer B, A.B, A.A; + @layer A { + @layer A { + target.first { color: green; } + } + @layer B { + target.first { color: red; } + target.second { color: green; } + } + } + @layer B { + target { color: red; } + } + `, + }, + { + title: 'E5 Statement syntax', + style: ` + @layer A.B, B, A.A; + @layer A { + @layer A { + target.first { color: red; } + } + @layer B { + target.first { color: red; } + target.second { color: red; } + } + } + @layer B { + target { color: green; } + } + `, + }, +]; + +for (let testCase of testCases) { + const styleElement = document.createElement('style'); + styleElement.textContent = testCase['style']; + document.head.append(styleElement); + + test(function () { + var targets = document.querySelectorAll('target'); + for (target of targets) + assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', + testCase['title'] + ", target '" + target.classList[0] + "'"); + }, testCase['title']); + + styleElement.remove(); +} +</script> +</body> +</html> |