tor-browser

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

test_nodesFromPoint.html (3979B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      4 <style>
      5  div { text-align: justify; max-height: 100vh; }
      6 </style>
      7 <div id="testElement"></div>
      8 <script>
      9 
     10 // TODO(emilio): Upstream to WPT once there's a spec for this and our
     11 // implementation is not [ChromeOnly].
     12 
     13 const testElement = document.getElementById("testElement");
     14 
     15 testElement.innerHTML = "X ".repeat(5000);
     16 
     17 {
     18  const rect = testElement.getBoundingClientRect();
     19 
     20  const node =
     21    document.nodeFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     22  is(node, testElement.firstChild, "Should return the text node");
     23 
     24  const nodes =
     25    document.nodesFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     26 
     27  const expected = [testElement.firstChild, testElement, document.body, document.documentElement];
     28  is(nodes.length, expected.length, "Not the amount of expected nodes");
     29 
     30  for (let i = 0; i < nodes.length; ++i)
     31    is(nodes[i], expected[i]);
     32 }
     33 
     34 // Make the test slotted, and add some fallback that we'll test later as well.
     35 {
     36  // Work around the sanitizer by building the DOM manually....
     37  const slot = document.createElement("slot");
     38  slot.innerHTML = "Y ".repeat(5000);
     39 
     40  const wrapper = document.createElement("div");
     41  wrapper.appendChild(slot);
     42 
     43  testElement.attachShadow({ mode: "open" }).appendChild(wrapper);
     44 }
     45 
     46 {
     47  const rect = testElement.getBoundingClientRect();
     48 
     49  const node =
     50    document.nodeFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     51  is(node, testElement.firstChild, "Should return the text node");
     52 
     53  const nodes =
     54    document.nodesFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     55 
     56  const expected = [testElement.firstChild, testElement, document.body, document.documentElement];
     57  is(nodes.length, expected.length, "Not the amount of expected nodes (returned nodes in the shadow?)");
     58 
     59  for (let i = 0; i < nodes.length; ++i)
     60    is(nodes[i], expected[i]);
     61 }
     62 
     63 {
     64  const rect = testElement.getBoundingClientRect();
     65 
     66  const node =
     67    testElement.shadowRoot.nodeFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     68  is(node, testElement.shadowRoot.firstChild, "Should return the div wrapping the text node");
     69 
     70  const nodes =
     71    testElement.shadowRoot.nodesFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     72 
     73  const expected = [testElement.shadowRoot.firstChild];
     74  is(nodes.length, expected.length, "Not the amount of expected nodes (returned nodes outside of the shadow?)");
     75 
     76  for (let i = 0; i < nodes.length; ++i)
     77    is(nodes[i], expected[i]);
     78 }
     79 
     80 // Show the fallback.
     81 testElement.firstChild.remove();
     82 
     83 {
     84  const rect = testElement.getBoundingClientRect();
     85 
     86  const fallbackText = testElement.shadowRoot.querySelector("slot").firstChild;
     87 
     88  const node =
     89    testElement.shadowRoot.nodeFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     90  is(node, fallbackText, "Should return the fallback text");
     91 
     92  const nodes =
     93    testElement.shadowRoot.nodesFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
     94 
     95  const expected = [fallbackText, testElement.shadowRoot.firstChild];
     96  is(nodes.length, expected.length, "Not the amount of expected nodes (returned nodes outside of the shadow?)");
     97 
     98  for (let i = 0; i < nodes.length; ++i)
     99    is(nodes[i], expected[i]);
    100 }
    101 
    102 // Test the fallback from the document.
    103 {
    104  const rect = testElement.getBoundingClientRect();
    105 
    106  const node =
    107    document.nodeFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
    108  is(node, testElement, "Should return the element, since the fallback text is in the shadow");
    109 
    110  const nodes =
    111    document.nodesFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
    112 
    113  const expected = [testElement, document.body, document.documentElement];
    114  is(nodes.length, expected.length, "Not the amount of expected nodes (returned nodes inside of the shadow?)");
    115 
    116  for (let i = 0; i < nodes.length; ++i)
    117    is(nodes[i], expected[i]);
    118 }
    119 </script>