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 selectNode()
  29     {
  30         InspectorTest.selectNodeWithId('circle', evaluate);
  31     }
  32     function evaluate(node)
  33     {
  34         InspectorTest.dumpInspectorHighlightShape(node, i == 0 ? scroll: InspectorTest.completeTest.bind(InspectorTest));
  35     }
  36     function scroll()
  37     {
  38         window.scrollTo(0, 100);
  39         ++i;
  40         selectNode();
  41     }
  42     selectNode();
  43 }
  44
  45 </script>
  46 </head>
  47
  48 <body onload="runTest()">
  49 <div class="float circle" id="circle"> </div>
  50 </body>
  51 </html>