third_party/WebKit/ManualTests/inspector/highlight-nodes.html

   1 <style>
   2 .skewed {
   3   transform:skew(-5deg,-5deg);
   4 }
   5 </style>
   6 <p>This page has basic tests of node highlighting in the inspected page. To tests, load this page, open the inspector and mouseover the nodes in the treeview of the inspector. You should see the highlights happen with the appropriate padding/border/margin/content highlights.</p>
   7 <div style="padding:10px; border: 10px solid; margin: 10px;">padding:10px; border: 10px; margin: 10px;</div>
   8 <div style="padding:10px; border: 10px solid;">padding:10px; border: 10px;</div>
   9 <div style="padding:10px; margin: 10px;">padding:10px; margin: 10px;</div>
  10 <div style="border: 10px solid; margin: 10px;">border: 10px; margin: 10px;</div>
  11 <div style="padding:10px">padding:10px;</div>
  12 <div style="border: 10px solid;">border: 10px;</div>
  13 <div style="margin: 10px;">margin: 10px;</div>
  14 <div>no padding, border, or margin</div>
  15 <div class=skewed style="padding:10px; border: 10px solid; margin: 10px;">transform:skew(-5deg,-5deg); padding:10px; border: 10px; margin: 10px;</div>
  16 <div class=skewed style="padding:10px; border: 10px solid;">transform:skew(-5deg,-5deg); padding:10px; border: 10px;</div>
  17 <div class=skewed style="padding:10px; margin: 10px;">transform:skew(-5deg,-5deg); padding:10px; margin: 10px;</div>
  18 <div class=skewed style="border: 10px solid; margin: 10px;">transform:skew(-5deg,-5deg); border: 10px; margin: 10px;</div>
  19 <div class=skewed style="padding:10px">transform:skew(-5deg,-5deg); padding:10px;</div>
  20 <div class=skewed style="border: 10px solid;">transform:skew(-5deg,-5deg); border: 10px;</div>
  21 <div class=skewed style="margin: 10px;">transform:skew(-5deg,-5deg); margin: 10px;</div>
  22 <div class=skewed >transform:skew(-5deg,-5deg); no padding, border, or margin</div>
  23