multiple-centered-dialogs.html (1812B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 body { 10 height: 10000px; 11 } 12 13 dialog { 14 padding: 0; 15 height: 50px; 16 width: 50px; 17 } 18 19 #console { 20 position: fixed; 21 } 22 </style> 23 24 <dialog id="top-dialog"></dialog> 25 <dialog id="first-middle-dialog"></dialog> 26 <dialog id="second-middle-dialog" style="left: 100px"></dialog> 27 <dialog id="bottom-dialog"></dialog> 28 29 <script> 30 test(() => { 31 function documentHeight() { 32 // clientHeight is an integer, but we want the correct floating point 33 // value. Start a binary search at clientHeight-1 and clientHeight+1. 34 let min = document.documentElement.clientHeight; 35 let max = min + 1; 36 --min; 37 38 // binary search with media queries to find the correct height 39 for (let iter = 0; iter < 10; ++iter) { 40 let test = (min + max) / 2; 41 if (window.matchMedia(`(min-height: ${test}px)`).matches) 42 min = test; 43 else 44 max = test; 45 } 46 return min; 47 } 48 function expectedTop(dialog) { 49 let height = documentHeight(); 50 return (height - dialog.getBoundingClientRect().height) / 2; 51 } 52 53 function showAndTest(id) { 54 dialog = document.getElementById(id); 55 dialog.showModal(); 56 assert_approx_equals(dialog.getBoundingClientRect().top, expectedTop(dialog), 0.05, id); 57 } 58 59 showAndTest('top-dialog'); 60 61 window.scroll(0, 100); 62 showAndTest('first-middle-dialog'); 63 showAndTest('second-middle-dialog'); 64 65 window.scroll(0, 200); 66 showAndTest('bottom-dialog'); 67 }, 'Test that multiple dialogs are centered properly.'); 68 </script>