view-timeline-inset-computed.html (1990B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-inset"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7243"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/computed-testcommon.js"></script> 7 <style> 8 #outer { font-size:10px; } 9 #outer { view-timeline-inset: 1px 2px, auto 3px; } 10 #target { view-timeline-inset: 42px; } 11 </style> 12 <div id=outer> 13 <div id=target></div> 14 </div> 15 <script> 16 test_computed_value('view-timeline-inset', 'initial', 'auto'); 17 test_computed_value('view-timeline-inset', 'inherit', '1px 2px, auto 3px'); 18 test_computed_value('view-timeline-inset', 'unset', 'auto'); 19 test_computed_value('view-timeline-inset', 'revert', 'auto'); 20 test_computed_value('view-timeline-inset', '1px'); 21 test_computed_value('view-timeline-inset', '1%'); 22 test_computed_value('view-timeline-inset', 'calc(1% + 1px)'); 23 test_computed_value('view-timeline-inset', '1px 2px'); 24 test_computed_value('view-timeline-inset', '1px 2em', '1px 20px'); 25 test_computed_value('view-timeline-inset', 'calc(1px + 1em) 2px', '11px 2px'); 26 test_computed_value('view-timeline-inset', '1px 2px, 3px 4px'); 27 test_computed_value('view-timeline-inset', '1px auto, auto 4px'); 28 test_computed_value('view-timeline-inset', '1px, 2px, 3px'); 29 test_computed_value('view-timeline-inset', '1px 1px, 2px 3px', '1px, 2px 3px'); 30 test_computed_value('view-timeline-inset', 'auto auto, auto auto', 'auto, auto'); 31 32 test(() => { 33 let style = getComputedStyle(document.getElementById('target')); 34 assert_not_equals(Array.from(style).indexOf('view-timeline-inset'), -1); 35 }, 'The view-timeline-inset property shows up in CSSStyleDeclaration enumeration'); 36 37 test(() => { 38 let style = document.getElementById('target').style; 39 assert_not_equals(style.cssText.indexOf('view-timeline-inset'), -1); 40 }, 'The view-timeline-inset property shows up in CSSStyleDeclaration.cssText'); 41 </script>