tor-browser

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

interestfor-pseudo-element.tentative.html (3051B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <link rel="author" href="mailto:masonf@chromium.org">
      4 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer">
      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 <script src="resources/invoker-utils.js"></script>
     11 
     12 <div id=examples>
     13  <button interestfor=target>Button</button>
     14  <a href=# interestfor=target>Link</a>
     15 </div>
     16 
     17 <div id=target popover>Target</div>
     18 <button id=unrelated>Unrelated</div>
     19 
     20 <style>
     21  [interestfor] {
     22    interest-delay: 1000s;
     23  }
     24  ::interest-hint {
     25    content:"pseudo";
     26    display: block;
     27    position: absolute;
     28    width: 50px;
     29    height: 50px;
     30    left: 150px;
     31    padding:0;
     32    margin:0;
     33  }
     34  button, a {
     35    display:block;
     36    width: 100px;
     37    height: 50px;
     38  }
     39 </style>
     40 
     41 <script>
     42 const target = document.getElementById('target');
     43 const unrelated = document.getElementById('unrelated');
     44 
     45 let interestFired = 0;
     46 let loseInterestFired = 0;
     47 target.addEventListener('interest', (e) => {
     48  ++interestFired;
     49 });
     50 target.addEventListener('loseinterest', (e) => {
     51  ++loseInterestFired;
     52 });
     53 
     54 function test(invoker) {
     55  promise_test(async (t) => {
     56    interestFired = 0, loseInterestFired = 0;
     57    await hoverOver(invoker);
     58    assert_equals(interestFired, 0, 'Hovering should not immediately show interest (delay)');
     59    await hoverOver(unrelated);
     60    assert_equals(interestFired, 0, 'No extra events');
     61    assert_equals(loseInterestFired, 0, 'No extra events');
     62 
     63    let rect = invoker.getBoundingClientRect();
     64    const buttonlocX = rect.x + 175;
     65    const buttonlocY = rect.y + 30;
     66    await new test_driver.Actions()
     67      .pointerMove(buttonlocX, buttonlocY, {})
     68      .send();
     69    assert_equals(interestFired, 0, 'Hovering the pseudo button should not show interest (delay)');
     70    await new test_driver.Actions()
     71      .addPointer("touchPointer", "touch")
     72      .pointerMove(buttonlocX, buttonlocY, {})
     73      .pointerDown()
     74      .pointerUp()
     75      .send();
     76    assert_equals(interestFired, 1, 'Clicking/tapping the pseudo button should show interest immediately');
     77    await new test_driver.Actions()
     78      .addPointer("touchPointer", "touch")
     79      .pointerMove(0,0,{unrelated})
     80      .send();
     81    assert_equals(interestFired, 1, 'No extra events');
     82    assert_equals(loseInterestFired, 0, 'No "hover" with touch pointers, so we should\'t lose interest yet');
     83    await new test_driver.Actions()
     84      .addPointer("touchPointer", "touch")
     85      .pointerMove(0,0,{unrelated})
     86      .pointerDown()
     87      .pointerUp()
     88      .send();
     89    await waitForRender();
     90    assert_equals(interestFired, 1, 'No extra events');
     91    assert_equals(loseInterestFired, 1, 'Tapping outside should lose interest');
     92  },`pseudo element should work for ${invoker.textContent}`);
     93 }
     94 
     95 document.querySelectorAll('#examples > *').forEach(test);
     96 </script>