testing/web-platform/tests/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8" />
   3 <title>Popup light dismiss behavior</title>
   4 <link rel="author" href="mailto:masonf@chromium.org">
   5 <link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
   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
  14
  15 <button id=b1 onclick='p1.show()'>Popup 1</button>
  16 <span id=outside>Outside all popups</span>
  17 <popup id=p1 anchor=b1>
  18   <span id=inside1>Inside popup 1</span>
  19   <button id=b2 onclick='p2.show()'>Popup 2</button>
  20 </popup>
  21 <popup id=p2 anchor=b2>
  22   <span id=inside2>Inside popup 2</span>
  23 </popup>
  24
  25 <button id=b3 popup=p3>Popup 3 - button 1
  26   <popup id=p4>Inside popup 4</popup>
  27 </button>
  28 <popup id=p3>Inside popup 3</popup>
  29 <button id=b4 popup=p3>Popup 3 - button 2
  30   <popup id=p5>Inside popup 5</popup>
  31 </button>
  32
  33 <style>
  34   #p1 { top:50px; }
  35   #p2 { top:50px; left:250px; }
  36   #p4 { top:150px;}
  37   popup { border: 5px solid red; }
  38 </style>
  39
  40
  41 <script>
  42   function clickOn(element) {
  43     const actions = new test_driver.Actions();
  44     return actions.pointerMove(0, 0, {origin: element})
  45       .pointerDown({button: actions.ButtonType.LEFT})
  46       .pointerUp({button: actions.ButtonType.LEFT})
  47       .send();
  48   }
  49
  50   const popup1 = document.querySelector('#p1');
  51   const button1 = document.querySelector('#b1');
  52   const popup2 = document.querySelector('#p2');
  53   const outside = document.querySelector('#outside');
  54   const inside1 = document.querySelector('#inside1');
  55   const inside2 = document.querySelector('#inside2');
  56   const button3 = document.querySelector('#b3');
  57   const button4 = document.querySelector('#b4');
  58   const popup3 = document.querySelector('#p3');
  59   const popup4 = document.querySelector('#p4');
  60   const popup5 = document.querySelector('#p5');
  61
  62   (async function() {
  63     setup({ explicit_done: true });
  64
  65     let popup1HideCount = 0;
  66     popup1.addEventListener('hide',(e) => {
  67       ++popup1HideCount;
  68       e.preventDefault(); // 'hide' should not be cancellable.
  69     });
  70     let popup2HideCount = 0;
  71     popup2.addEventListener('hide',(e) => {
  72       ++popup2HideCount;
  73       e.preventDefault(); // 'hide' should not be cancellable.
  74     });
  75
  76     assert_false(popup1.open);
  77     popup1.show();
  78     let p1HideCount = popup1HideCount;
  79     assert_true(popup1.open);
  80     await clickOn(outside);
  81     test(t => {
  82       assert_false(popup1.open);
  83       assert_equals(popup1HideCount,p1HideCount+1);
  84     },'Clicking outside a popup will dismiss the popup');
  85
  86     assert_false(popup1.open);
  87     popup1.show();
  88     p1HideCount = popup1HideCount;
  89     await clickOn(inside1);
  90     test(t => {
  91       assert_true(popup1.open);
  92       assert_equals(popup1HideCount,p1HideCount);
  93     },'Clicking inside a popup does not close that popup');
  94
  95     popup2.show();
  96     p1HideCount = popup1HideCount;
  97     let p2HideCount = popup2HideCount;
  98     await clickOn(inside2);
  99     test(t => {
 100       assert_true(popup1.open);
 101       assert_true(popup2.open);
 102       assert_equals(popup1HideCount,p1HideCount,'popup1');
 103       assert_equals(popup2HideCount,p2HideCount,'popup2');
 104     },'Clicking inside a child popup shouldn\'t close either popup');
 105
 106     popup2.show();
 107     p1HideCount = popup1HideCount;
 108     p2HideCount = popup2HideCount;
 109     await clickOn(inside1);
 110     test(t => {
 111       assert_true(popup1.open);
 112       assert_equals(popup1HideCount,p1HideCount);
 113       assert_false(popup2.open);
 114       assert_equals(popup2HideCount,p2HideCount+1);
 115     },'Clicking inside a parent popup should close child popup');
 116
 117     p1HideCount = popup1HideCount;
 118     await clickOn(button1);
 119     test(t => {
 120       assert_true(popup1.open);
 121       assert_equals(popup1HideCount,p1HideCount);
 122     },'Clicking on anchor element shouldn\'t close its popup');
 123
 124     await clickOn(button3);
 125     assert_true(popup3.open,'invoking element should open popup');
 126     popup4.show();
 127     test(t => {
 128       assert_true(popup4.open);
 129       assert_true(popup3.open);
 130     },'An invoking element should be part of the ancestor chain');
 131
 132     await clickOn(button3);
 133     assert_true(popup3.open);
 134     assert_false(popup4.open);
 135     assert_false(popup5.open);
 136     popup5.show();
 137     test(t => {
 138       assert_true(popup5.open);
 139       assert_false(popup3.open);
 140     },'An invoking that was not used to invoke the popup should NOT be part of the ancestor chain');
 141
 142     done();
 143   })();
 144 </script>