closed-details-layout-apis.tentative.html (1529B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/pull/6466"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <details id=details> 8 <div style="width:100px; height:100px; background-color:red" id=innerdiv></div> 9 </details> 10 11 <script> 12 test(() => { 13 assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x before open'); 14 assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y before open'); 15 assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width before open'); 16 assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height before open'); 17 details.open = true; 18 assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x after open'); 19 assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y after open'); 20 assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width after open'); 21 assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height after open'); 22 details.open = false; 23 assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x after close'); 24 assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y after close'); 25 assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width after close'); 26 assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height after close'); 27 }, `Verifies the layout results of elements inside a closed <details> based on the usage of content-visibility:hidden.`); 28 </script>