third_party/WebKit/LayoutTests/inspector/elements/highlight/highlight-css-shapes-outside.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 .contentBox {
  21     background-color:blue;
  22     border-radius: 2em 4em 2em 2em;
  23     border-width: 3em 1em 2em 1em;
  24     padding: 1em 1em 1em 2em;
  25     margin: 2em 1em 1em 1em;
  26     shape-outside: content-box;
  27     -webkit-clip-path: content-box;
  28 }
  29
  30 .insetSimpleRound {
  31     background-color:green;
  32     shape-outside: inset(30% round 20%);
  33     -webkit-clip-path: inset(30% round 20%);
  34 }
  35
  36 .insetComplexRound {
  37     background-color:blue;
  38     shape-outside: inset(10% round 10% 40% 10% 40%);
  39     -webkit-clip-path: inset(10% round 10% 40% 10% 40%);
  40 }
  41
  42 .ellipse {
  43     background-color:green;
  44     height: 5em;
  45     shape-outside: ellipse(closest-side closest-side);
  46     -webkit-clip-path: ellipse(closest-side closest-side);
  47 }
  48
  49 .raster {
  50     background-color: blue;
  51     shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'><rect width='100' height='100' fill='green'/></svg>");
  52 }
  53
  54 .polygon {
  55     background-color: green;
  56     shape-outside: polygon(0px 0px, 0px 200px, 200px 0px);
  57 }
  58
  59 </style>
  60 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  61 <script src="../../../http/tests/inspector/elements-test.js"></script>
  62 <script>
  63
  64 function test()
  65 {
  66     var list = ["circle", "insetSimpleRound", "insetComplexRound", "ellipse", "contentBox", "polygon", "raster"];
  67     var index = 0;
  68     function nextNode()
  69     {
  70         var nodeId = String(list[index++]);
  71         InspectorTest.dumpInspectorHighlightJSON(nodeId, (index == list.length)  ? InspectorTest.completeTest.bind(InspectorTest): nextNode);
  72     }
  73     nextNode();
  74 }
  75
  76 </script>
  77 </head>
  78
  79 <body onload="runTest()">
  80 <div class="float circle" id="circle"> </div>
  81 <div class="float insetSimpleRound" id="insetSimpleRound"> </div>
  82 <div class="float insetComplexRound" id="insetComplexRound"> </div>
  83 <div class="float ellipse" id="ellipse"> </div>
  84 <div class="float contentBox" id="contentBox"> </div>
  85 <div class="float polygon" id="polygon"> </div>
  86 <div class="float raster" id="raster"> </div>
  87 </body>
  88 </html>