src/third_party/WebKit/LayoutTests/inspector/elements/highlight-node-scroll.html

   1 <html>
   2 <head>
   3
   4 <style>
   5
   6 body {
   7     width: 2000px;
   8     height: 2000px;
   9     background-color: grey;
  10 }
  11 .inspected {
  12     margin: 5px;
  13     border: solid 10px aqua;
  14     padding: 15px;
  15     width: 200px;
  16     height: 200px;
  17     background-color: blue;
  18     float: left;
  19 }
  20 #scrollingContainer {
  21     clear: both;
  22     width: 100px;
  23     height: 100px;
  24     overflow: auto;
  25 }
  26 #description {
  27     clear: both;
  28 }
  29
  30 </style>
  31
  32 <script src="../../http/tests/inspector/inspector-test.js"></script>
  33 <script src="../../http/tests/inspector/elements-test.js"></script>
  34 <script>
  35
  36 function onload()
  37 {
  38     window.scrollBy(50, 100);
  39     scrollingContainer = document.getElementById("scrollingContainer");
  40     scrollingContainer.scrollTop = 50;
  41     scrollingContainer.scrollLeft = 60;
  42     runTest();
  43 }
  44
  45 function test()
  46 {
  47     InspectorTest.dumpInspectorHighlightJSON("inspectedElement1", testNode2);
  48
  49     function testNode2()
  50     {
  51         InspectorTest.dumpInspectorHighlightJSON("inspectedElement2", InspectorTest.completeTest.bind(InspectorTest));
  52     }
  53 }
  54
  55 </script>
  56 </head>
  57
  58 <body onload="onload()">
  59
  60 <div id="inspectedElement1" class="inspected"></div>
  61
  62 <div id="scrollingContainer">
  63     <div id="inspectedElement2" class="inspected"></div>
  64 </div>
  65
  66 <p id="description">This test verifies the position and size of the highlight rectangles overlayed on an inspected div in the scrolled view.</p>
  67
  68 </body>
  69 </html>