blob: f9dc89d0e3cd0948aef7e3e21756846d46f3aa8a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!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>
|
