mouse-click-move-summary-to-different-details.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <!-- Any copyright is dedicated to the Public Domain.
  3. - http://creativecommons.org/publicdomain/zero/1.0/ -->
  4. <html class="reftest-wait">
  5. <script>
  6. function runTest() {
  7. // Both Chrome and Safari do not add the 'open' attribute to details1
  8. // element, but Firefox does add 'open' to details1 since summary2 had been
  9. // moved to details1 before receiving the 'click' event.
  10. var details1 = document.getElementById("details1");
  11. var summary2 = document.getElementById("summary2");
  12. document.body.addEventListener("click", function () {
  13. // Move summary2 into details1 at capture phase, and summary2 will be the
  14. // main summary of details1 at target phase.
  15. details1.insertBefore(summary2, details1.children[0]);
  16. }, true);
  17. summary2.dispatchEvent(new MouseEvent("click"));
  18. document.documentElement.removeAttribute("class");
  19. }
  20. </script>
  21. <body onload="runTest();">
  22. <details id="details1">
  23. <summary id="summary1">Summary 1</summary>
  24. <p>This is the details 1.</p>
  25. </details>
  26. <details>
  27. <summary id="summary2">Summary 2</summary>
  28. <p>This is the details 2.</p>
  29. </details>
  30. </body>
  31. </html>