tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

select-popover-position-with-zoom.tentative.html (3779B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>HTMLselectElement Test: popover position with zoom</title>
      4 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 
     11 <style>
     12  #select0 {
     13    position: absolute;
     14    top: 0px;
     15    left: 0px;
     16    zoom: 2;
     17  }
     18 
     19  #select1 {
     20    position: absolute;
     21    bottom: 0px;
     22    left: 0px;
     23    zoom: 1.5;
     24  }
     25 
     26  #select1-popover {
     27    zoom: 2;
     28  }
     29 
     30  #select2 {
     31    position: absolute;
     32    top: 0px;
     33    right: 0px;
     34    zoom: 3;
     35  }
     36 
     37  #select3 {
     38    position: absolute;
     39    bottom: 0px;
     40    right: 0px;
     41    zoom: 4;
     42  }
     43 
     44  #select3-popover {
     45    zoom: 1.5;
     46  }
     47 
     48  select, ::picker(select) {
     49    appearance: base-select;
     50    padding:0;
     51  }
     52 </style>
     53 
     54 <select id="select0">
     55  <div id="select0-popover">
     56    <option>bottom left</option>
     57    <option>two</option>
     58    <option>three</option>
     59  </div>
     60 </select>
     61 <br>
     62 
     63 <select id="select1">
     64  <div id="select1-popover">
     65    <option>top left</option>
     66    <option>two</option>
     67    <option>three</option>
     68  </div>
     69 </select>
     70 
     71 <select id="select2">
     72  <div id="select2-popover">
     73    <option>bottom right</option>
     74    <option>two</option>
     75    <option>three</option>
     76  </div>
     77 </select>
     78 
     79 <select id="select3">
     80  <div id="select3-popover">
     81    <option>top right</option>
     82    <option>two</option>
     83    <option>three</option>
     84  </div>
     85 </select>
     86 
     87 <script>
     88  function clickOn(element) {
     89    const actions = new test_driver.Actions();
     90    return actions.pointerMove(0, 0, {origin: element})
     91      .pointerDown({button: actions.ButtonType.LEFT})
     92      .pointerUp({button: actions.ButtonType.LEFT})
     93      .send();
     94  }
     95 
     96  function assertPos(expected, actual) {
     97    assert_true(Math.abs(Math.trunc(expected - actual)) == 0,`Expected ${expected} but got ${actual}`);
     98  }
     99 
    100  promise_test(async () => {
    101    const select0 = document.getElementById("select0");
    102    const select0Popover = document.getElementById("select0-popover");
    103 
    104    await clickOn(select0);
    105    assertPos(select0.getBoundingClientRect().bottom, select0Popover.getBoundingClientRect().top);
    106    assertPos(select0.getBoundingClientRect().left, select0Popover.getBoundingClientRect().left);
    107  }, "The popover should be bottom left positioned");
    108 
    109  promise_test(async () => {
    110    const select1 = document.getElementById("select1");
    111    const select1Popover = document.getElementById("select1-popover");
    112 
    113    await clickOn(select1);
    114    assertPos(select1.getBoundingClientRect().top, select1Popover.getBoundingClientRect().bottom * 2);
    115    assertPos(select1.getBoundingClientRect().left, select1Popover.getBoundingClientRect().left * 2);
    116  }, "The popover should be top left positioned");
    117 
    118  promise_test(async () => {
    119    const select2 = document.getElementById("select2");
    120    const select2Popover = document.getElementById("select2-popover");
    121 
    122    await clickOn(select2);
    123    assertPos(select2.getBoundingClientRect().bottom, select2Popover.getBoundingClientRect().top);
    124    assertPos(select2.getBoundingClientRect().right, select2Popover.getBoundingClientRect().right);
    125  }, "The popover should be bottom right positioned");
    126 
    127  promise_test(async () => {
    128    const select3 = document.getElementById("select3");
    129    const select3Popover = document.getElementById("select3-popover");
    130 
    131    await clickOn(select3);
    132    assertPos(select3.getBoundingClientRect().top, select3Popover.getBoundingClientRect().bottom * 1.5);
    133    assertPos(select3.getBoundingClientRect().right, select3Popover.getBoundingClientRect().right * 1.5);
    134  }, "The popover should be top right positioned");
    135 
    136 </script>