tor-browser

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

elementsFromPoint-shadowroot.html (2962B)

      1 <!DOCTYPE HTML>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="resources/elementsFromPoint.js"></script>
      5 <style>
      6 html, body {
      7    margin: 0;
      8    padding: 0;
      9 }
     10 body {
     11    height: 500px;
     12 }
     13 </style>
     14 <body>
     15 <div id="host"></div>
     16 <div id="blockHost"></div>
     17 <span id="inlineBlockHost" style="display:inline-block;"></span>
     18 <input type="submit" id="submit">
     19 <script>
     20 function assertElementsFromPoint(doc, x, y, expected) {
     21  var query = doc + '.elementsFromPoint(' + x + ',' + y + ')';
     22  var sequence = eval(query);
     23  assert_equals(nodeListToString(sequence), nodeListToString(expected), query);
     24 }
     25 
     26 function createBox(id) {
     27    var div = document.createElement('div');
     28    div.id = id;
     29    div.style.width = '100px';
     30    div.style.height = '10px';
     31    return div;
     32 }
     33 
     34 function centerX(element) {
     35    return element.offsetLeft + element.offsetWidth / 2;
     36 }
     37 
     38 function centerY(element) {
     39    return element.offsetTop + element.offsetHeight / 2;
     40 }
     41 
     42 var shadowRoot = host.attachShadow({mode: 'closed'});
     43 var box11 = createBox('box11');
     44 var box12 = createBox('box12');
     45 var box13 = createBox('box13');
     46 shadowRoot.appendChild(box11);
     47 shadowRoot.appendChild(box12);
     48 shadowRoot.appendChild(box13);
     49 
     50 var nestedHost = document.createElement('div');
     51 var nestedShadowRoot = nestedHost.attachShadow({mode: 'closed'});
     52 var box21 = createBox('box21');
     53 var box22 = createBox('box22');
     54 var box23 = createBox('box23');
     55 nestedShadowRoot.appendChild(box21);
     56 nestedShadowRoot.appendChild(box22);
     57 nestedShadowRoot.appendChild(box23);
     58 
     59 shadowRoot.appendChild(nestedHost);
     60 
     61 var x12 = centerX(box12);
     62 var y12 = centerY(box12);
     63 var x22 = centerX(box22);
     64 var y22 = centerY(box22);
     65 
     66 var root3 = blockHost.attachShadow({mode: 'closed'});
     67 root3.appendChild(document.createTextNode('text1'));
     68 var root4 = inlineBlockHost.attachShadow({mode: 'closed'});
     69 root4.appendChild(document.createTextNode('text2'));
     70 
     71 test(function() {
     72    assertElementsFromPoint('document', x22, y22, [host, document.body, document.documentElement]);
     73    assertElementsFromPoint('document', centerX(blockHost), centerY(blockHost),
     74        [blockHost, document.body, document.documentElement]);
     75    assertElementsFromPoint('document', centerX(inlineBlockHost), centerY(inlineBlockHost),
     76        [inlineBlockHost, document.body, document.documentElement]);
     77    assertElementsFromPoint('document', centerX(submit), centerY(submit),
     78        [submit, document.body, document.documentElement]);
     79 }, 'elementsFromPoint on the document root should not return elements in shadow trees');
     80 
     81 test(function() {
     82    assert_not_equals(shadowRoot.elementsFromPoint(x12, y12).indexOf(box12), -1);
     83    assert_not_equals(shadowRoot.elementsFromPoint(x22, y22).indexOf(nestedHost), -1);
     84    assert_not_equals(nestedShadowRoot.elementsFromPoint(x22, y22).indexOf(box22), -1);
     85 }, 'elementsFromPoint on a shadow root should include elements in that shadow tree');
     86 </script>
     87 </body>