inspector-traversal-data.html (3110B)
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 if (host.attachShadow) { 27 const root = host.attachShadow({ mode: "open" }); 28 29 const h3 = document.createElement("h3"); 30 h3.append("Shadow "); 31 32 const em = document.createElement("em"); 33 em.append("DOM"); 34 35 const select = document.createElement("select"); 36 select.setAttribute("multiple", ""); 37 h3.appendChild(em); 38 root.appendChild(h3); 39 root.appendChild(select); 40 } 41 42 // Put a copy of the body in an iframe to test frame traversal. 43 const body = document.querySelector("body"); 44 const data = "data:text/html,<html>" + body.outerHTML + "<html>"; 45 const iframe = document.createElement("iframe"); 46 iframe.setAttribute("id", "childFrame"); 47 iframe.onload = function() { 48 window.opener.postMessage("ready", "*"); 49 }; 50 iframe.src = data; 51 body.appendChild(iframe); 52 }; 53 </script> 54 </head> 55 <body style="background-color:white"> 56 <h1>Inspector Actor Tests</h1> 57 <span id="longstring">longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</span> 58 <span id="shortstring">short</span> 59 <span id="empty"></span> 60 <div id="longlist" data-test="exists"> 61 <div id="a">a</div> 62 <div id="b">b</div> 63 <div id="c">c</div> 64 <div id="d">d</div> 65 <div id="e">e</div> 66 <div id="f">f</div> 67 <div id="g">g</div> 68 <div id="h">h</div> 69 <div id="i">i</div> 70 <div id="j">j</div> 71 <div id="k">k</div> 72 <div id="l">l</div> 73 <div id="m">m</div> 74 <div id="n">n</div> 75 <div id="o">o</div> 76 <div id="p">p</div> 77 <div id="q">q</div> 78 <div id="r">r</div> 79 <div id="s">s</div> 80 <div id="t">t</div> 81 <div id="u">u</div> 82 <div id="v">v</div> 83 <div id="w">w</div> 84 <div id="x">x</div> 85 <div id="y">y</div> 86 <div id="z">z</div> 87 </div> 88 <div id="longlist-sibling"> 89 <div id="longlist-sibling-firstchild"></div> 90 </div> 91 <p id="edit-html"></p> 92 93 <select multiple><option>one</option><option>two</option></select> 94 <div id="pseudo"><span>middle</span></div> 95 <div id="pseudo-empty"></div> 96 <div id="shadow">light dom</div> 97 <object> 98 <div id="1"></div> 99 </object> 100 <div class="node-to-duplicate"></div> 101 <div id="scroll-into-view" style="margin-top: 1000px;">scroll</div> 102 </body> 103 </html>