test_shadowroot_subframe.html (1820B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>ShadowRoot hit tests</title> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 6 <script type="application/javascript" src="../common.js"></script> 7 <script type="application/javascript" src="../layout.js"></script> 8 9 <script type="application/javascript"> 10 let SimpleTest = window.parent.SimpleTest; 11 let ok = window.parent.ok; 12 let is = window.parent.is; 13 14 function doTest() { 15 var componentAcc = getAccessible("component1"); 16 testChildAtPoint(componentAcc, 1, 1, componentAcc.firstChild, 17 componentAcc.firstChild); 18 19 componentAcc = getAccessible("component2"); 20 testChildAtPoint(componentAcc, 1, 1, componentAcc.firstChild, 21 componentAcc.firstChild); 22 SimpleTest.finish(); 23 } 24 25 SimpleTest.waitForExplicitFinish(); 26 addA11yLoadEvent(doTest); 27 </script> 28 29 </head> 30 <body> 31 <div role="group" class="components" id="component1" style="display: inline-block;"> 32 <!-- 33 <div role="button" id="component-child" 34 style="width: 100px; height: 100px; background-color: pink;"> 35 </div> 36 --> 37 </div> 38 <div role="group" class="components" id="component2" style="display: inline-block;"> 39 <!-- 40 <button>Hello world</button> 41 --> 42 </div> 43 <script> 44 // This routine adds the comment children of each 'component' to its 45 // shadow root. 46 var components = document.querySelectorAll(".components"); 47 for (var i = 0; i < components.length; i++) { 48 var component = components[i]; 49 var shadow = component.attachShadow({mode: "open"}); 50 for (var child = component.firstChild; child; child = child.nextSibling) { 51 if (child.nodeType === 8) 52 shadow.innerHTML = child.data; 53 } 54 } 55 </script> 56 </body> 57 </html>