interactive-content.html (10006B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>summary element: interactive content</title> 4 <link rel="author" title="Michael[tm] Smith" href="mailto:mike@w3.org"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <details> 12 <summary id=summary> 13 <a id=a href="#">anchor element</a> 14 <svg style="width: 160px; height: 100px" viewBox="0 0 100 100"> 15 <a href="#" id="svg_a"><text id="svg_text" x="50" y="90" text-anchor="middle">SVG anchor element</text></a> 16 </svg> 17 <svg style="width: 100px; height: 200px" viewBox="0 0 100 100"> 18 <foreignObject x="0" y="60" width="100" height="200" text-anchor="middle"> 19 <a xmlns="http://www.w3.org/1999/xhtml" href="#" id="svg_foreignObject_a">SVG foreignObject with HTML anchor element</a> 20 </foreignObject> 21 </svg> 22 <audio id="audio" controls src=/media/sound_5.mp3></audio> 23 <button id=button>button element</button> 24 <embed id=embed src="/images/blue.png" height="100" width="100"> 25 <iframe id=iframe srcdoc="iframe element"></iframe> 26 <img id=img_usemap usemap src=/media/poster.png></img> 27 <img id=img src=/media/poster.png></img> 28 <input type="text" value="input@type=text" id="input_text"> 29 <input type="search" value="input@type=search" id="input_search"> 30 <input type="tel" value="input@type=tel" id="input_tel"> 31 <input type="url" value="input@type=url" id="input_url"> 32 <input type="email" value="input@type=email" id="input_email"> 33 <input type="password" value="input@type=password" id="input_password"> 34 <input type="button" value="input@type=button" id="input_button"> 35 <input type="reset" id="input_reset"> 36 <input type="submit" id="input_submit"> 37 <input type="date" value="input@type=date" id="input_date"> 38 <input type="month" value="input@type=month" id="input_month"> 39 <input type="week" value="input@type=week" id="input_week"> 40 <input type="time" id="input_time"> 41 <input type="datetime-local" id="input_datetime-local"> 42 <input type="color" id="input_color"> 43 <input type="number" value="1337" id="input_number"> 44 <input type="range" id="input_range"> 45 <input type="checkbox" id="input_checkbox"> 46 <input type="radio" id="input_radio" disabled> 47 <input type="file" id="input_file"> 48 <input type="image" id="input_image" src=/media/poster.png> 49 <label id=label style="display: block">label element</label> 50 <textarea value="textarea" id="textarea">textarea element</textarea> 51 <video id="video" controls> 52 <source src="/media/test-1s.mp4" type="video/mp4"> 53 <source src="/media/test-1s.webm" type="video/webm"> 54 </video> 55 <div id="non-interactive">This is clickable summary text</div> 56 </summary> 57 </details> 58 59 <script> 60 const details = document.querySelector("details"); 61 62 promise_test(async () => { 63 details.open = false; 64 await test_driver.click(document.getElementById("non-interactive")); 65 assert_true(details.open) 66 }, "Clicking on non-interactive child of a <summary> opens its <details>"); 67 promise_test(async () => { 68 details.open = false; 69 await test_driver.click(document.getElementById("a")); 70 assert_false(details.open) 71 }, "Clicking an <a> link doesn't open <details>"); 72 promise_test(async () => { 73 details.open = false; 74 await test_driver.click(document.getElementById("svg_a")); 75 assert_false(details.open) 76 }, "Clicking an SVG <a> link doesn't open <details>"); 77 promise_test(async () => { 78 details.open = false; 79 await test_driver.click(document.getElementById("svg_foreignObject_a")); 80 assert_false(details.open) 81 }, "Clicking an HTML <a> link in an SVG <foreignObject> doesn't open <details>"); 82 promise_test(async () => { 83 details.open = false; 84 await test_driver.click(document.getElementById("audio")); 85 assert_false(details.open) 86 }, "Clicking an <audio> element doesn't open <details>"); 87 promise_test(async () => { 88 details.open = false; 89 await test_driver.click(document.getElementById("button")); 90 assert_false(details.open) 91 }, "Clicking a <button> doesn't open <details>"); 92 promise_test(async () => { 93 details.open = false; 94 await test_driver.click(document.getElementById("embed")); 95 assert_false(details.open) 96 }, "Clicking the content of an <embed> doesn't open <details>"); 97 promise_test(async () => { 98 details.open = false; 99 await test_driver.click(document.getElementById("iframe")); 100 assert_false(details.open) 101 }, "Clicking in an <iframe> doesn't open <details>"); 102 promise_test(async () => { 103 details.open = false; 104 await test_driver.click(document.getElementById("img_usemap")); 105 assert_false(details.open) 106 }, "Clicking an <img> with a 'usemap' attribute doesn't open <details>"); 107 promise_test(async () => { 108 details.open = false; 109 await test_driver.click(document.getElementById("img")); 110 assert_true(details.open) 111 }, "Clicking an <img> without a 'usemap' attribute opens <details>"); 112 promise_test(async () => { 113 details.open = false; 114 await test_driver.click(document.getElementById("input_button")); 115 assert_false(details.open) 116 }, "Clicking an <input type=button> doesn't open <details>"); 117 promise_test(async () => { 118 details.open = false; 119 await test_driver.click(document.getElementById("input_reset")); 120 assert_false(details.open) 121 }, "Clicking an <input type=reset> doesn't open <details>"); 122 promise_test(async () => { 123 details.open = false; 124 await test_driver.click(document.getElementById("input_submit")); 125 assert_false(details.open) 126 }, "Clicking an <input type=submit> doesn't open <details>"); 127 promise_test(async () => { 128 details.open = false; 129 await test_driver.click(document.getElementById("input_text")); 130 assert_false(details.open) 131 }, "Clicking an <input type=text> doesn't open <details>"); 132 promise_test(async () => { 133 details.open = false; 134 await test_driver.click(document.getElementById("input_search")); 135 assert_false(details.open) 136 }, "Clicking an <input type=search> doesn't open <details>"); 137 promise_test(async () => { 138 details.open = false; 139 await test_driver.click(document.getElementById("input_tel")); 140 assert_false(details.open) 141 }, "Clicking an <input type=tel> doesn't open <details>"); 142 promise_test(async () => { 143 details.open = false; 144 await test_driver.click(document.getElementById("input_url")); 145 assert_false(details.open) 146 }, "Clicking an <input type=url> doesn't open <details>"); 147 promise_test(async () => { 148 details.open = false; 149 await test_driver.click(document.getElementById("input_email")); 150 assert_false(details.open) 151 }, "Clicking an <input type=email> doesn't open <details>"); 152 promise_test(async () => { 153 details.open = false; 154 await test_driver.click(document.getElementById("input_password")); 155 assert_false(details.open) 156 }, "Clicking an <input type=password> doesn't open <details>"); 157 promise_test(async () => { 158 details.open = false; 159 await test_driver.click(document.getElementById("input_date")); 160 assert_false(details.open) 161 }, "Clicking an <input type=date> doesn't open <details>"); 162 promise_test(async () => { 163 details.open = false; 164 await test_driver.click(document.getElementById("input_month")); 165 assert_false(details.open) 166 }, "Clicking an <input type=month> doesn't open <details>"); 167 promise_test(async () => { 168 details.open = false; 169 await test_driver.click(document.getElementById("input_week")); 170 assert_false(details.open) 171 }, "Clicking an <input type=week> doesn't open <details>"); 172 promise_test(async () => { 173 details.open = false; 174 await test_driver.click(document.getElementById("input_time")); 175 assert_false(details.open) 176 }, "Clicking an <input type=time> doesn't open <details>"); 177 promise_test(async () => { 178 details.open = false; 179 await test_driver.click(document.getElementById("input_datetime-local")); 180 assert_false(details.open) 181 }, "Clicking an <input type=datetime-local> doesn't open <details>"); 182 promise_test(async () => { 183 details.open = false; 184 await test_driver.click(document.getElementById("input_number")); 185 assert_false(details.open) 186 }, "Clicking an <input type=number> doesn't open <details>"); 187 promise_test(async () => { 188 details.open = false; 189 await test_driver.click(document.getElementById("input_range")); 190 assert_false(details.open) 191 }, "Clicking an <input type=range> doesn't open <details>"); 192 promise_test(async () => { 193 details.open = false; 194 await test_driver.click(document.getElementById("input_color")); 195 assert_false(details.open) 196 }, "Clicking an <input type=color> doesn't open <details>"); 197 promise_test(async () => { 198 details.open = false; 199 await test_driver.click(document.getElementById("input_checkbox")); 200 assert_false(details.open) 201 }, "Clicking an <input type=checkbox> doesn't open <details>"); 202 promise_test(async () => { 203 details.open = false; 204 await test_driver.click(document.getElementById("input_radio")); 205 assert_false(details.open) 206 }, "Clicking an <input type=radio> doesn't open <details>"); 207 promise_test(async () => { 208 details.open = false; 209 await test_driver.click(document.getElementById("input_file")); 210 assert_false(details.open) 211 }, "Clicking an <input type=file> doesn't open <details>"); 212 promise_test(async () => { 213 details.open = false; 214 await test_driver.click(document.getElementById("input_image")); 215 assert_false(details.open) 216 }, "Clicking an <input type=image> doesn't open <details>"); 217 promise_test(async () => { 218 details.open = false; 219 await test_driver.click(document.getElementById("label")); 220 assert_false(details.open) 221 }, "Clicking a <label> doesn't open <details>"); 222 promise_test(async () => { 223 details.open = false; 224 await test_driver.click(document.getElementById("textarea")); 225 assert_false(details.open) 226 }, "Clicking in a <textarea> doesn't open <details>"); 227 promise_test(async () => { 228 details.open = false; 229 await test_driver.click(document.getElementById("video")); 230 assert_false(details.open) 231 }, "Clicking a <video> doesn't open <details>"); 232 </script>