test_shadowroot_subframe.html (1681B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>ShadowRoot 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="../role.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 testElm("component", { 16 role: ROLE_GROUPING, 17 children: [ 18 { 19 role: ROLE_PUSHBUTTON, 20 }, 21 { 22 role: ROLE_LINK, 23 }, 24 ], 25 }); 26 27 // Shadow root boundary between table and row 28 testElm("table", { 29 role: ROLE_TABLE, 30 children: [ 31 { 32 role: ROLE_ROW, 33 }, 34 ], 35 }); 36 37 SimpleTest.finish(); 38 } 39 40 addA11yLoadEvent(doTest); 41 </script> 42 43 </head> 44 <body> 45 <div role="group" id="component"></div> 46 <div id="table" role="table" style="display: table;"></div> 47 48 <script> 49 var component = document.getElementById("component"); 50 var shadow = component.attachShadow({mode: "open"}); 51 52 var button = document.createElement("button"); 53 button.append("Hello"); 54 55 var a = document.createElement("a"); 56 a.setAttribute("href", "#"); 57 a.append(" World"); 58 59 shadow.appendChild(button); 60 shadow.appendChild(a); 61 62 var table = document.getElementById("table"); 63 shadow = table.attachShadow({mode: "open"}); 64 shadow.innerHTML = "<div style='display: table-row' role='row'>" + 65 "<div style='display: table-cell' role='cell'>hi</div>" + 66 "</div>"; 67 </script> 68 </body>