third_party/WebKit/LayoutTests/http/tests/css/css-image-valued-shape.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="/js-test-resources/js-test.js"></script>
   5 <style>
   6     #shape {
   7         float: left;
   8         width: 200px;
   9         height: 200px;
  10         -webkit-shape-outside: url("/resources/load-and-stall.php?name=square100.png&stallAt=0&stallFor=1");
  11     }
  12 </style>
  13 </head>
  14 <body>
  15 <p>Verify that a image valued shape-outside layout is updated after the image has been loaded. This test
  16 checks that left edge of the "Hello World" text span is defined by the 200px wide float before shape-outside
  17 image has been loaded and by the 100px wide image after it's been laoded.</p>
  18
  19 <div id="container">
  20   <div id="shape"></div><span id="text">Hello World</span>
  21 </div>
  22 <p id="console"></p>
  23
  24 <script>
  25 window.jsTestIsAsync = true;
  26 function elementRect(elementId)
  27 {
  28     var s = document.getElementById("container").getBoundingClientRect();
  29     var r = document.getElementById(elementId).getBoundingClientRect();
  30     return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
  31 }
  32
  33 shouldBe('elementRect("text").left', "200"); // image hasn't loaded yet
  34
  35 window.onload = function() {
  36     document.body.offsetTop; // fetch offsetTop to force a layout
  37     shouldBe('elementRect("text").left', "100");
  38     finishJSTest();
  39 };
  40
  41 </script>
  42 </body>
  43 </html>