40 lines
2 KiB
HTML
40 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Scroll-Driven Animations: The ident() function </title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#ident">
|
|
<link rel="help" href="https://drafts.csswg.org/scroll-animations">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
<div id=target></div>
|
|
<script>
|
|
let actual_ident = 'ident("--myident" calc(42 * sign(1em - 1px)))';
|
|
let expected_ident = '--myident42';
|
|
|
|
// https://drafts.csswg.org/css-animations-2/#propdef-animation-timeline
|
|
test_computed_value('animation-timeline', actual_ident, expected_ident);
|
|
test_computed_value('animation-timeline', `--tl, scroll(), ${actual_ident}`,
|
|
`--tl, scroll(), ${expected_ident}`);
|
|
test_computed_value('animation-timeline', `${actual_ident}, ${actual_ident}`,
|
|
`${expected_ident}, ${expected_ident}`);
|
|
|
|
// https://drafts.csswg.org/scroll-animations/#scroll-timeline-name
|
|
test_computed_value('scroll-timeline-name', actual_ident, expected_ident);
|
|
test_computed_value('scroll-timeline-name', `--tl, ${actual_ident}`,
|
|
`--tl, ${expected_ident}`);
|
|
test_computed_value('scroll-timeline-name', `${actual_ident}, ${actual_ident}`,
|
|
`${expected_ident}, ${expected_ident}`);
|
|
|
|
// https://drafts.csswg.org/scroll-animations-1/#timeline-scope
|
|
test_computed_value('timeline-scope', actual_ident, expected_ident);
|
|
test_computed_value('timeline-scope', `--tl, ${actual_ident}`,
|
|
`--tl, ${expected_ident}`);
|
|
test_computed_value('timeline-scope', `${actual_ident}, ${actual_ident}`,
|
|
`${expected_ident}, ${expected_ident}`);
|
|
|
|
// https://drafts.csswg.org/scroll-animations/#view-timeline-name
|
|
test_computed_value('view-timeline-name', actual_ident, expected_ident);
|
|
test_computed_value('view-timeline-name', `--tl, ${actual_ident}`,
|
|
`--tl, ${expected_ident}`);
|
|
test_computed_value('view-timeline-name', `${actual_ident}, ${actual_ident}`,
|
|
`${expected_ident}, ${expected_ident}`);
|
|
</script>
|