timeline-names-ident-function.html (2033B)
1 <!DOCTYPE html> 2 <title>Scroll-Driven Animations: The ident() function </title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#ident"> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/computed-testcommon.js"></script> 8 <div id=target></div> 9 <script> 10 let actual_ident = 'ident("--myident" calc(42 * sign(1em - 1px)))'; 11 let expected_ident = '--myident42'; 12 13 // https://drafts.csswg.org/css-animations-2/#propdef-animation-timeline 14 test_computed_value('animation-timeline', actual_ident, expected_ident); 15 test_computed_value('animation-timeline', `--tl, scroll(), ${actual_ident}`, 16 `--tl, scroll(), ${expected_ident}`); 17 test_computed_value('animation-timeline', `${actual_ident}, ${actual_ident}`, 18 `${expected_ident}, ${expected_ident}`); 19 20 // https://drafts.csswg.org/scroll-animations/#scroll-timeline-name 21 test_computed_value('scroll-timeline-name', actual_ident, expected_ident); 22 test_computed_value('scroll-timeline-name', `--tl, ${actual_ident}`, 23 `--tl, ${expected_ident}`); 24 test_computed_value('scroll-timeline-name', `${actual_ident}, ${actual_ident}`, 25 `${expected_ident}, ${expected_ident}`); 26 27 // https://drafts.csswg.org/scroll-animations-1/#timeline-scope 28 test_computed_value('timeline-scope', actual_ident, expected_ident); 29 test_computed_value('timeline-scope', `--tl, ${actual_ident}`, 30 `--tl, ${expected_ident}`); 31 test_computed_value('timeline-scope', `${actual_ident}, ${actual_ident}`, 32 `${expected_ident}, ${expected_ident}`); 33 34 // https://drafts.csswg.org/scroll-animations/#view-timeline-name 35 test_computed_value('view-timeline-name', actual_ident, expected_ident); 36 test_computed_value('view-timeline-name', `--tl, ${actual_ident}`, 37 `--tl, ${expected_ident}`); 38 test_computed_value('view-timeline-name', `${actual_ident}, ${actual_ident}`, 39 `${expected_ident}, ${expected_ident}`); 40 </script>