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