test_shadowdom.html (1804B)
1 <html> 2 3 <head> 4 <title>Explicit content and shadow DOM content relations tests</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../relations.js"></script> 14 <script type="application/javascript" 15 src="../role.js"></script> 16 17 <script type="application/javascript"> 18 function doTest() { 19 // explicit content 20 let label = document.getElementById("label"); 21 let element = document.getElementById("element"); 22 testRelation(label, RELATION_LABEL_FOR, element); 23 testRelation(element, RELATION_LABELLED_BY, label); 24 25 // shadow DOM content 26 let shadowRoot = document.getElementById("shadowcontainer").shadowRoot; 27 let shadowLabel = shadowRoot.getElementById("label"); 28 let shadowElement = shadowRoot.getElementById("element"); 29 30 testRelation(shadowLabel, RELATION_LABEL_FOR, shadowElement); 31 testRelation(shadowElement, RELATION_LABELLED_BY, shadowLabel); 32 33 SimpleTest.finish(); 34 } 35 36 SimpleTest.waitForExplicitFinish(); 37 38 addA11yLoadEvent(doTest, window); 39 </script> 40 </head> 41 42 <body> 43 <p id="display"></p> 44 <div id="content"> 45 <div id="label"></div> 46 <div id="element" aria-labelledby="label"></div> 47 <div id="shadowcontainer"></div> 48 <script> 49 let shadowRoot = document.getElementById("shadowcontainer"). 50 attachShadow({mode: "open"}); 51 shadowRoot.innerHTML = 52 `<div id="label"></div><div id="element" aria-labelledby="label"></div>`; 53 </script> 54 </div> 55 <pre id="test"> 56 </pre> 57 </body> 58 </html>