devtools/server/tests/chrome/inspector-traversal-data.html

   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>