third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-margin-002.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script>
   6     function imageShapeRect(elementId)
   7     {
   8         var s = document.getElementById("image-shape").getBoundingClientRect();
   9         var r = document.getElementById(elementId).getBoundingClientRect();
  10         return {right: s.right - r.right, top: r.top - s.top, width: r.width, height: r.height};
  11     }
  12
  13     window.onload = function() {
  14       var quiet = true; // PASS output depends on if subpixel layout has been enabled
  15
  16       shouldBe("imageShapeRect('a').top", "0");
  17       shouldBeCloseTo("imageShapeRect('a').right", 292, 1, quiet);
  18
  19       shouldBe("imageShapeRect('b').top", "50");
  20       shouldBe("imageShapeRect('b').right", "300");
  21
  22       shouldBe("imageShapeRect('c').top", "75");
  23       shouldBe("imageShapeRect('c').right", "300");
  24
  25       shouldBe("imageShapeRect('d').top", "125");
  26       shouldBeCloseTo("imageShapeRect('d').right", 292, 1, quiet);
  27
  28       shouldBe("imageShapeRect('e').top", "150");
  29       shouldBe("imageShapeRect('e').right", "0");
  30     };
  31 </script>
  32 <style>
  33     #image-shape {
  34         float: right;
  35         shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250px' height='100px'><rect x='50' y='50' width='200' height='50' fill='blue'/></svg>");
  36         shape-margin: 50px;
  37         shape-image-threshold: 0;
  38         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='300' height='150' rx='50' ry='50' fill='blue'/></svg>");
  39         background-repeat: no-repeat;
  40         width: 300px;
  41         height: 250px;
  42     }
  43
  44     #content {
  45         font: 25px/1 Ahem, sans-serif;
  46         color: green;
  47         text-align: right;
  48     }
  49 </style>
  50 </head>
  51 <body>
  52   <p>This test requires the Ahem font. The green content should wrap around the blue rounded rectangle.</p>
  53   <div id="content">
  54       <div id="image-shape"></div>
  55       <span id="a">X</span><br><br><span id="b">X</span><br><span id="c">X</span><br><br><span id="d">X</span><br><span id="e">XXXX</span>
  56   </div>
  57   <div id="console"></div>
  58 </body>
  59 </html>
  60