| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <title>Popup light dismiss behavior</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> |
| |
| |
| <button id=b1 onclick='p1.show()'>Popup 1</button> |
| <span id=outside>Outside all popups</span> |
| <popup id=p1 anchor=b1> |
| <span id=inside1>Inside popup 1</span> |
| <button id=b2 onclick='p2.show()'>Popup 2</button> |
| </popup> |
| <popup id=p2 anchor=b2> |
| <span id=inside2>Inside popup 2</span> |
| </popup> |
| |
| <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'); |
| const outside = document.querySelector('#outside'); |
| const inside1 = document.querySelector('#inside1'); |
| const inside2 = document.querySelector('#inside2'); |
| |
| (async function() { |
| setup({ explicit_done: true }); |
| |
| let popup1HideCount = 0; |
| popup1.addEventListener('hide',(e) => { |
| ++popup1HideCount; |
| e.preventDefault(); // 'hide' should not be cancellable. |
| }); |
| let popup2HideCount = 0; |
| popup2.addEventListener('hide',(e) => { |
| ++popup2HideCount; |
| e.preventDefault(); // 'hide' should not be cancellable. |
| }); |
| |
| assert_false(popup1.open); |
| popup1.show(); |
| let p1HideCount = popup1HideCount; |
| assert_true(popup1.open); |
| await clickOn(outside); |
| test(t => { |
| assert_false(popup1.open); |
| assert_equals(popup1HideCount,p1HideCount+1); |
| },'Clicking outside a popup will dismiss the popup'); |
| |
| assert_false(popup1.open); |
| popup1.show(); |
| p1HideCount = popup1HideCount; |
| await clickOn(inside1); |
| test(t => { |
| assert_true(popup1.open); |
| assert_equals(popup1HideCount,p1HideCount); |
| },'Clicking inside a popup does not close that popup'); |
| |
| popup2.show(); |
| p1HideCount = popup1HideCount; |
| let p2HideCount = popup2HideCount; |
| await clickOn(inside2); |
| test(t => { |
| assert_true(popup1.open); |
| assert_true(popup2.open); |
| assert_equals(popup1HideCount,p1HideCount,'popup1'); |
| assert_equals(popup2HideCount,p2HideCount,'popup2'); |
| },'Clicking inside a child popup shouldn\'t close either popup'); |
| |
| popup2.show(); |
| p1HideCount = popup1HideCount; |
| p2HideCount = popup2HideCount; |
| await clickOn(inside1); |
| test(t => { |
| assert_true(popup1.open); |
| assert_equals(popup1HideCount,p1HideCount); |
| assert_false(popup2.open); |
| assert_equals(popup2HideCount,p2HideCount+1); |
| },'Clicking inside a parent popup should close child popup'); |
| |
| p1HideCount = popup1HideCount; |
| await clickOn(button1); |
| test(t => { |
| assert_true(popup1.open); |
| assert_equals(popup1HideCount,p1HideCount); |
| },'Clicking on anchor element shouldn\'t close its popup'); |
| |
| done(); |
| })(); |
| </script> |
