timeline-scope-computed.html (1384B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope"> 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 { timeline-scope: --foo; } 9 #target { timeline-scope: --bar; } 10 </style> 11 <div id="outer"> 12 <div id="target"></div> 13 </div> 14 <script> 15 test_computed_value('timeline-scope', 'initial', 'none'); 16 test_computed_value('timeline-scope', 'inherit', '--foo'); 17 test_computed_value('timeline-scope', 'unset', 'none'); 18 test_computed_value('timeline-scope', 'revert', 'none'); 19 test_computed_value('timeline-scope', 'none'); 20 test_computed_value('timeline-scope', '--test'); 21 test_computed_value('timeline-scope', '--foo, --bar'); 22 test_computed_value('timeline-scope', '--bar, --foo'); 23 test_computed_value('timeline-scope', '--a, --b, --c, --D, --e'); 24 25 test(() => { 26 let style = getComputedStyle(document.getElementById('target')); 27 assert_not_equals(Array.from(style).indexOf('timeline-scope'), -1); 28 }, 'The timeline-scope property shows up in CSSStyleDeclaration enumeration'); 29 30 test(() => { 31 let style = document.getElementById('target').style; 32 assert_not_equals(style.cssText.indexOf('timeline-scope'), -1); 33 }, 'The timeline-scope property shows up in CSSStyleDeclaration.cssText'); 34 35 </script>