Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-shapes/shape-outside/shape-image/shape-image-028.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>'shape-outside' layout is updated after the image has been loaded</title>
<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>