click-behavior-optional.tentative.html (1393B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>summary element: click behavior</title> 4 <link rel="author" title="Mu-An Chiou" href="mailto:hi@muan.co"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#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-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <body> 13 <div id="log"></div> 14 15 <details id="details"> 16 <summary id="summary">Summary</summary> 17 <p>Contents</p> 18 </details> 19 </body> 20 21 <script> 22 // This behavior is not specified by HTML standards, but setting focus on 23 // clicked summary tag is the current behavior on Chrome, Safari, and Firefox 24 // in both Windows and macOS. 25 async_test(t => { 26 const details = document.getElementById("details") 27 const summary = document.getElementById("summary") 28 29 t.step_timeout(() => { 30 details.addEventListener("toggle", t.step_func_done(function () { 31 assert_equals(details.open, true, "details should be open") 32 assert_equals(document.activeElement, summary, "active element should be summary") 33 t.done() 34 })) 35 36 new test_driver.click(summary) 37 }, 200) 38 }, "clicking on summary should open details and set focus on summary") 39 </script>