dialog-showModal.html (6207B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>dialog element: showModal()</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/#the-dialog-element"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="log"></div> 9 <button id="b0">OK</button> 10 <dialog id="d1"> 11 <p>foobar</p> 12 <button id="b1">OK</button> 13 </dialog> 14 <dialog id="d2" open> 15 <p>foobar</p> 16 <button>OK</button> 17 </dialog> 18 <dialog id="d3"> 19 <p>foobar</p> 20 <button id="b3">OK</button> 21 </dialog> 22 <dialog id="d4"> 23 <p>foobar</p> 24 <button id="b4">OK</button> 25 </dialog> 26 <dialog id="d5"> 27 <p>foobar</p> 28 <button id="b5">OK</button> 29 </dialog> 30 <dialog id="d6"></dialog> 31 <dialog id="d7"> 32 <input id="i71" value="foobar"> 33 <input id="i72" value="foobar"> 34 <button id="b7">OK</button> 35 </dialog> 36 <dialog id="d8"> 37 <input id="i81" value="foobar"> 38 <input id="i82" value="foobar" autofocus> 39 <button id="b8">OK</button> 40 </dialog> 41 <dialog id="d9"></dialog> 42 <dialog id="d10"></dialog> 43 <dialog id="d11"></dialog> 44 <script> 45 var d1 = document.getElementById('d1'), 46 d2 = document.getElementById('d2'), 47 d3 = document.getElementById('d3'), 48 d4 = document.getElementById('d4'), 49 d5 = document.getElementById('d5'), 50 d6 = document.getElementById('d6'), 51 d7 = document.getElementById('d7'), 52 d8 = document.getElementById('d8'), 53 d9 = document.getElementById('d9'), 54 d10 = document.getElementById('d10'), 55 d11 = document.getElementById('d11'), 56 b0 = document.getElementById('b0'), 57 b1 = document.getElementById('b1'), 58 b3 = document.getElementById('b3'), 59 b4 = document.getElementById('b4'), 60 b5 = document.getElementById('b5'); 61 62 test(function(){ 63 assert_false(d1.open); 64 assert_false(d1.hasAttribute("open")); 65 assert_equals(getComputedStyle(d1).display, "none"); 66 d1.showModal(); 67 this.add_cleanup(function() { d1.close(); }); 68 assert_true(d1.open); 69 assert_equals(d1.getAttribute("open"), ""); 70 assert_equals(getComputedStyle(d1).display, "block"); 71 assert_equals(document.activeElement, b1); 72 }); 73 74 test(function(){ 75 this.add_cleanup(function() { d2.close(); }); 76 assert_throws_dom("INVALID_STATE_ERR", function() { 77 d2.showModal(); 78 }); 79 }, "showModal() on a <dialog> that already has an open attribute throws an InvalidStateError exception"); 80 81 test(function(){ 82 d9.showModal(); 83 this.add_cleanup(function() { d9.close(); }); 84 assert_true(d9.open); 85 d9.removeAttribute("open"); 86 assert_false(d9.open); 87 d9.showModal(); 88 assert_true(d9.open); 89 }, "showModal() on a <dialog> after initial showModal() and removing the open attribute"); 90 91 test(function(){ 92 var d = document.createElement("dialog"); 93 this.add_cleanup(function() { d.close(); }); 94 assert_throws_dom("INVALID_STATE_ERR", function() { 95 d.showModal(); 96 }); 97 }, "showModal() on a <dialog> not in a Document throws an InvalidStateError exception"); 98 99 test(function(){ 100 assert_false(d3.open); 101 assert_false(d4.open); 102 assert_false(d5.open); 103 d3.showModal(); 104 this.add_cleanup(function() { d3.close(); }); 105 d4.showModal(); 106 this.add_cleanup(function() { d4.close(); }); 107 d5.showModal(); 108 this.add_cleanup(function() { d5.close(); }); 109 assert_true(d3.open); 110 assert_true(d4.open); 111 assert_true(d5.open); 112 }, "when opening multiple dialogs, only the newest one is non-inert"); 113 114 test(function(){ 115 assert_false(d6.open); 116 d6.showModal(); 117 this.add_cleanup(function() { d6.close(); }); 118 assert_true(d6.open); 119 assert_equals(document.activeElement, d6); 120 }, "opening dialog without focusable children"); 121 122 test(function(){ 123 assert_false(d7.open); 124 d7.showModal(); 125 this.add_cleanup(function() { d7.close(); }); 126 assert_true(d7.open); 127 assert_equals(document.activeElement, document.getElementById("i71")); 128 }, "opening dialog with multiple focusable children"); 129 130 test(function(){ 131 assert_false(d8.open); 132 d8.showModal(); 133 this.add_cleanup(function() { d8.close(); }); 134 assert_true(d8.open); 135 assert_equals(document.activeElement, document.getElementById("i82")); 136 }, "opening dialog with multiple focusable children, one having the autofocus attribute"); 137 138 test(function(){ 139 assert_false(d10.open); 140 assert_false(d11.open); 141 d10.showModal(); 142 this.add_cleanup(function() { d10.close(); }); 143 d11.showModal(); 144 this.add_cleanup(function() { d11.close(); }); 145 var rect10 = d10.getBoundingClientRect(); 146 var rect11 = d11.getBoundingClientRect(); 147 148 // The two <dialog>s are both in top layer, with the same position/size. 149 assert_equals(rect10.left, rect11.left); 150 assert_equals(rect10.top, rect11.top); 151 assert_equals(rect10.width, rect11.width); 152 assert_equals(rect10.height, rect11.height); 153 154 var pointX = rect10.left + rect10.width / 2, 155 pointY = rect10.top + rect10.height / 2; 156 function topElement() { 157 return document.elementFromPoint(pointX, pointY); 158 } 159 160 // d11 was most recently openened, and thus on top. 161 assert_equals(topElement(), d11); 162 163 // Removing the open attribute and running through the showModal() algorithm 164 // again should promote d10 to the top. 165 d10.removeAttribute("open"); 166 assert_equals(topElement(), d11); 167 d10.showModal(); 168 assert_equals(topElement(), d10); 169 170 // Closing d11 with close() should cause d10 to be the topmost element. 171 d11.close(); 172 assert_equals(topElement(), d10); 173 }, "when opening multiple dialogs, the most recently opened is rendered on top"); 174 175 test(function() { 176 assert_false(d11.open); 177 d11.parentNode.removeChild(d11); 178 assert_throws_dom("INVALID_STATE_ERR", () => d11.showModal()); 179 180 const doc = document.implementation.createHTMLDocument(); 181 doc.body.appendChild(d11); 182 this.add_cleanup(() => document.body.append(d11)); 183 assert_false(d11.open); 184 assert_throws_dom("INVALID_STATE_ERR", () => d11.showModal()); 185 assert_false(d11.open); 186 }, "When the document is not attached to any pages, showModal() should throw."); 187 </script>