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

   1 <html>
   2 <script>
   3   "use strict";
   4
   5   window.onload = () => {
   6     window.opener.postMessage("ready", "*");
   7   };
   8 </script>
   9 <style>
  10   .inheritable-rule {
  11     font-size: 15px;
  12   }
  13   /* Has to be on one line, is such for test */
  14   .column-rule { font-size: 20px; } .column-rule { font-size: 25px; }
  15   .uninheritable-rule {
  16     background-color: #f06;
  17   }
  18   @media screen {
  19     #mediaqueried {
  20       background-color: #f06;
  21     }
  22   }
  23   #svgcontent rect {
  24     fill: rgb(1,2,3);
  25   }
  26
  27   #layout-element,
  28   #layout-auto-margin-element {
  29     width: 50px;
  30     height: 50px;
  31     padding: 3px 5px 7px 5px;
  32     border: 5px solid red;
  33     margin: 10px 20px 30px 0;
  34     box-sizing: border-box;
  35     position: absolute;
  36     z-index: 2;
  37   }
  38
  39   #layout-auto-margin-element {
  40     margin: 10px auto;
  41   }
  42 </style>
  43 <link type="text/css" rel="stylesheet" href="inspector-styles-data.css"></link>
  44 <body>
  45   <h1>Style Actor Tests</h1>
  46   <!-- Inheritance checks -->
  47   <div id="inheritable-rule-uninheritable-style" class="inheritable-rule" style="background-color: purple">
  48     <div id="inheritable-rule-inheritable-style" class="inheritable-rule" style="color: blue">
  49       <div id="uninheritable-rule-uninheritable-style" class="uninheritable-rule" style="background-color: green">
  50         <div id="uninheritable-rule-inheritable-style" class="uninheritable-rule" style="color: red">
  51           <div id="test-node">
  52             Here is the test node.
  53           </div>
  54         </div>
  55       </div>
  56     </div>
  57   </div>
  58
  59   <!-- Computed checks -->
  60   <div id="computed-parent" class="external-rule inheritable-rule uninheritable-rule" style="color: red;">
  61     <div id="computed-test-node" class="external-rule">
  62       Here is the test node.
  63     </div>
  64   </div>
  65
  66   <!-- Matched checks -->
  67   <div id="matched-parent" class="external-rule inheritable-rule column-rule uninheritable-rule" style="color: red;">
  68     <div id="matched-test-node" style="font-size: 10px" class="external-rule">
  69       Here is the test node.
  70     </div>
  71   </div>
  72
  73   <div id="mediaqueried">
  74     Screen mediaqueried.
  75   </div>
  76
  77   <div id="svgcontent">
  78     <svg><rect></rect></svg>
  79   </div>
  80
  81   <div id="layout-element">I can has layout</div>
  82   <div id="layout-auto-margin-element">I can has layout too</div>
  83
  84 </body>
  85 </html>