| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <title>Popup anchor nesting</title> |
| <link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org"> |
| <link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| |
| <body> |
| |
| <!-- This example has the anchor (b1) for one popup (p1) |
| which contains a separate popup (p2) which is anchored |
| by a separate anchor (b2). --> |
| <button id=b1 onclick='p1.show()'>Popup 1 |
| <popup id=p2 anchor=b2> |
| <span id=inside2>Inside popup 2</span> |
| </popup> |
| </button> |
| <popup id=p1 anchor=b1>This is popup 1</popup> |
| <button id=b2 onclick='p2.show()'>Popup 2</button> |
| |
| <style> |
| #p1 { top:50px; } |
| #p2 { top:50px; left:250px; } |
| popup { border: 5px solid red; } |
| </style> |
| |
| |
| <script> |
| function clickOn(element) { |
| const actions = new test_driver.Actions(); |
| return actions.pointerMove(0, 0, {origin: element}) |
| .pointerDown({button: actions.ButtonType.LEFT}) |
| .pointerUp({button: actions.ButtonType.LEFT}) |
| .send(); |
| } |
| |
| const popup1 = document.querySelector('#p1'); |
| const button1 = document.querySelector('#b1'); |
| const popup2 = document.querySelector('#p2'); |
| |
| (async function() { |
| setup({ explicit_done: true }); |
| |
| popup1.show(); |
| assert_true(popup1.open); |
| popup2.show(); |
| assert_true(popup2.open); |
| assert_false(popup1.open,'Popups are not nested, so popup1 should close'); |
| await clickOn(button1); |
| test(t => { |
| // Button1 is the anchor for popup1, and an ancestor of popup2. |
| // Since popup2 is open, but not popup1, button1 should not be |
| // the anchor of any open popup. So popup2 should be closed. |
| assert_false(popup2.open); |
| },'Nested popups (inside anchor elements) do not affect light dismiss'); |
| |
| done(); |
| })(); |
| </script> |
