79 lines
3.7 KiB
HTML
79 lines
3.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>CSS sibling-index() and sibling-count()</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
// <length>
|
|
test_valid_value('left', 'calc(1px * sibling-index())');
|
|
test_valid_value('left', 'calc(1px * sibling-index( ))', 'calc(1px * sibling-index())');
|
|
test_valid_value('left', 'calc(1em * sibling-index())');
|
|
test_valid_value('left', 'calc(1rem * sibling-count())');
|
|
test_valid_value('left', 'calc(1vh * sibling-index())');
|
|
test_valid_value('left', 'calc(1ch * sibling-count())');
|
|
test_valid_value('left', 'calc(1% * sibling-index())');
|
|
test_valid_value('left', 'calc(5% * sibling-count())');
|
|
|
|
test_invalid_value('left', 'calc(1px * sibling-index(100px))');
|
|
test_invalid_value('left', 'calc(1px * sibling-index(1))');
|
|
test_invalid_value('left', 'calc(10 * sibling-index())');
|
|
|
|
// <angle>
|
|
test_valid_value('rotate', 'calc(10deg * sibling-index())');
|
|
test_valid_value('rotate', 'calc(sibling-index() * 2rad * pi)', 'calc(360deg * sibling-index())');
|
|
test_valid_value('rotate', 'calc(1turn * sibling-count())', 'calc(360deg * sibling-count())');
|
|
test_valid_value('rotate', 'calc(sibling-count() * 1rad * pi)', 'calc(180deg * sibling-count())');
|
|
|
|
test_invalid_value('rotate', 'calc(1px * sibling-index())');
|
|
test_invalid_value('rotate', 'calc(1s * sibling-index())');
|
|
|
|
// <integer> (which accepts these functions without calc())
|
|
test_valid_value('z-index', 'sibling-index()');
|
|
test_valid_value('z-index', 'sibling-count()');
|
|
test_valid_value('z-index', 'calc(2 * sibling-index())');
|
|
test_valid_value('z-index', 'calc(sibling-index())', 'sibling-index()');
|
|
test_valid_value('z-index', 'calc(sibling-count())', 'sibling-count()');
|
|
|
|
test_invalid_value('z-index', 'sibling-index(100px)');
|
|
test_invalid_value('z-index', 'sibling-count(1)');
|
|
|
|
// <number>
|
|
test_valid_value('opacity', 'calc(0.1 * sibling-index())');
|
|
test_valid_value('opacity', 'calc(0.5 * sibling-count())');
|
|
test_valid_value('scale', 'calc(2 * sibling-index())');
|
|
test_valid_value('scale', 'calc(0.5 * sibling-count())');
|
|
|
|
test_invalid_value('opacity', 'calc(1ms * sibling-index())');
|
|
test_invalid_value('opacity', 'calc(1px * sibling-count())');
|
|
|
|
// <time>
|
|
test_valid_value('animation-duration', 'calc(1s * sibling-index())');
|
|
test_valid_value('animation-duration', 'calc(1s * sibling-count( ))', 'calc(1s * sibling-count())');
|
|
test_valid_value('animation-duration', 'calc(100ms * sibling-count())', 'calc(0.1s * sibling-count())');
|
|
test_valid_value('animation-duration', 'calc(0.5s * sibling-index())');
|
|
test_valid_value('animation-duration', 'calc(250ms * sibling-index())', 'calc(0.25s * sibling-index())');
|
|
|
|
test_invalid_value('animation-duration', 'calc(1px * sibling-index())');
|
|
test_invalid_value('animation-duration', 'calc(1deg * sibling-index())');
|
|
|
|
// <color> functions
|
|
test_valid_value('color', 'color(srgb calc(0.1 * sibling-index()) 0.5 0.5)');
|
|
test_valid_value('color', 'color(srgb 0 calc(0.1 * sibling-count()) 0.5)');
|
|
test_valid_value('color', 'color(srgb 0 0 calc(0.1 * sibling-index()))');
|
|
test_valid_value('color', 'color(srgb 0.5 0.5 0.5 / calc(0.1 * sibling-count()))');
|
|
test_valid_value('color', 'oklch(calc(0.1 * sibling-index()) 0.2 180)');
|
|
test_valid_value('color', 'oklch(0.5 calc(0.05 * sibling-count()) 180)');
|
|
test_valid_value('color', 'oklch(0.5 0.2 calc(30deg * sibling-index()))');
|
|
test_valid_value('color', 'oklch(0.5 0.2 180 / calc(0.1 * sibling-index()))');
|
|
|
|
test_invalid_value('color', 'color(srgb calc(1px * sibling-index()) 0 0)');
|
|
test_invalid_value('color', 'oklch(calc(1px * sibling-index()) 0 0)');
|
|
</script>
|
|
</body>
|
|
</html>
|