Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/css/css-shapes/shape-outside/shape-image/shape-image-028.html 

<!DOCTYPE html>
<title>'shape-outside' layout is updated after the image has been loaded</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-image">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #shape {
    float: left;
    width: 200px;
    height: 200px;
    shape-outside: url("support/left-half-rectangle.png?pipe=trickle(d1)");
  }
</style>
<p>
  Verify that an image valued shape-outside layout is updated after the image has
  been loaded. This test checks that the left edge of the "Hello World" text span
  is defined by the 200px wide float before shape-outside image has been loaded and
  by the 100px wide image segment after it has been loaded.
</p>
<div id="container">
  <img src="support/left-half-rectangle.png" id="shape"><span id="text">Hello World</span>
</div>
<script>
  function elementRect(elementId) {
    var s = document.getElementById("container").getBoundingClientRect();
    var r = document.getElementById(elementId).getBoundingClientRect();
    return {left: r.left - s.left, top: r.top - s.top,
            width: r.width, height: r.height};
  }

  async_test(t => {
    assert_equals(elementRect("text").left, 200, 'image not loaded');

    window.onload = t.step_func_done(() => {
      document.body.offsetTop;  // Force a layout.

      assert_equals(elementRect("text").left, 100, 'image loaded');
    });
  });
</script>