src/third_party/WebKit/LayoutTests/inspector/elements/highlight-css-shapes-outside-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 .float {
   7     width: 8em;
   8     height: 8em;
   9     float: left;
  10     shape-margin: 2em;
  11     margin: 1em;
  12 }
  13
  14 .circle {
  15     background-color:blue;
  16     shape-outside: circle(closest-side at center);
  17     -webkit-clip-path: circle(closest-side at center);
  18 }
  19
  20 </style>
  21 <script src="../../http/tests/inspector/inspector-test.js"></script>
  22 <script src="../../http/tests/inspector/elements-test.js"></script>
  23 <script>
  24
  25 function test()
  26 {
  27     var i = 0;
  28     function dump()
  29     {
  30         InspectorTest.dumpInspectorHighlightJSON("circle", i == 0 ? scroll : InspectorTest.completeTest.bind(InspectorTest));
  31     }
  32     function scroll()
  33     {
  34         window.scrollTo(0, 100);
  35         ++i;
  36         dump();
  37     }
  38     dump();
  39 }
  40
  41 </script>
  42 </head>
  43
  44 <body onload="runTest()">
  45 <div class="float circle" id="circle"> </div>
  46 </body>
  47 </html>