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