1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!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>
|
