view-timeline-name-computed.html (1583B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/css/support/computed-testcommon.js"></script> 6 </head> 7 <style> 8 #outer { view-timeline-name: --foo, --bar; } 9 #target { view-timeline-name: --faz; } 10 </style> 11 <div id=outer> 12 <div id=target></div> 13 </div> 14 <script> 15 test_computed_value('view-timeline-name', 'initial', 'none'); 16 test_computed_value('view-timeline-name', 'inherit', '--foo, --bar'); 17 test_computed_value('view-timeline-name', 'unset', 'none'); 18 test_computed_value('view-timeline-name', 'revert', 'none'); 19 test_computed_value('view-timeline-name', 'none'); 20 test_computed_value('view-timeline-name', '--foo'); 21 test_computed_value('view-timeline-name', '--foo, --bar'); 22 test_computed_value('view-timeline-name', '--bar, --foo'); 23 test_computed_value('view-timeline-name', '--a, --b, --c, --D, --e'); 24 test_computed_value('view-timeline-name', 'none, none'); 25 test_computed_value('view-timeline-name', '--a, --b, --c, none, --d, --e'); 26 27 test(() => { 28 let style = getComputedStyle(document.getElementById('target')); 29 assert_not_equals(Array.from(style).indexOf('view-timeline-name'), -1); 30 }, 'The view-timeline-name property shows up in CSSStyleDeclaration enumeration'); 31 32 test(() => { 33 let style = document.getElementById('target').style; 34 assert_not_equals(style.cssText.indexOf('view-timeline-name'), -1); 35 }, 'The view-timeline-name property shows up in CSSStyleDeclaration.cssText'); 36 </script>