inspector-traversal-data.html (2958B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Inspector Traversal Test Data</title> 6 <style type="text/css"> 7 #pseudo::before { 8 content: "before"; 9 } 10 #pseudo::after { 11 content: "after"; 12 } 13 #pseudo-empty::before { 14 content: "before an empty element"; 15 } 16 #shadow::before { 17 content: "Testing ::before on a shadow host"; 18 } 19 </style> 20 <script type="text/javascript"> 21 "use strict"; 22 23 window.onload = function() { 24 // Set up a basic shadow DOM 25 const host = document.querySelector("#shadow"); 26 const root = host.attachShadow({ mode: "open" }); 27 28 const h3 = document.createElement("h3"); 29 h3.append("Shadow "); 30 31 const em = document.createElement("em"); 32 em.append("DOM"); 33 34 const select = document.createElement("select"); 35 select.setAttribute("multiple", ""); 36 h3.appendChild(em); 37 root.appendChild(h3); 38 root.appendChild(select); 39 40 // Put a copy of the body in an iframe to test frame traversal. 41 const body = document.querySelector("body"); 42 const data = "data:text/html,<html>" + body.outerHTML + "<html>"; 43 const iframe = document.createElement("iframe"); 44 iframe.setAttribute("id", "childFrame"); 45 iframe.src = data; 46 body.appendChild(iframe); 47 }; 48 </script> 49 </head> 50 <body style="background-color:white"> 51 <h1>Inspector Actor Tests</h1> 52 <span id="longstring">longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</span> 53 <span id="shortstring">short</span> 54 <span id="empty"></span> 55 <div id="longlist" data-test="exists"> 56 <div id="a">a</div> 57 <div id="b">b</div> 58 <div id="c">c</div> 59 <div id="d">d</div> 60 <div id="e">e</div> 61 <div id="f">f</div> 62 <div id="g">g</div> 63 <div id="h">h</div> 64 <div id="i">i</div> 65 <div id="j">j</div> 66 <div id="k">k</div> 67 <div id="l">l</div> 68 <div id="m">m</div> 69 <div id="n">n</div> 70 <div id="o">o</div> 71 <div id="p">p</div> 72 <div id="q">q</div> 73 <div id="r">r</div> 74 <div id="s">s</div> 75 <div id="t">t</div> 76 <div id="u">u</div> 77 <div id="v">v</div> 78 <div id="w">w</div> 79 <div id="x">x</div> 80 <div id="y">y</div> 81 <div id="z">z</div> 82 </div> 83 <div id="longlist-sibling"> 84 <div id="longlist-sibling-firstchild"></div> 85 </div> 86 <p id="edit-html"></p> 87 88 <select multiple><option>one</option><option>two</option></select> 89 <div id="pseudo"><span>middle</span></div> 90 <div id="pseudo-empty"></div> 91 <div id="shadow">light dom</div> 92 <object> 93 <div id="1"></div> 94 </object> 95 <div class="node-to-duplicate"></div> 96 <div id="scroll-into-view" style="margin-top: 1000px;">scroll</div> 97 </body> 98 </html>