shape-image-028.html (1459B)
1 <!DOCTYPE html> 2 <title>'shape-outside' layout is updated after the image has been loaded</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-image"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #shape { 8 float: left; 9 width: 200px; 10 height: 200px; 11 shape-outside: url("support/left-half-rectangle.png?pipe=trickle(d1)"); 12 } 13 </style> 14 <p> 15 Verify that an image valued shape-outside layout is updated after the image has 16 been loaded. This test checks that the left edge of the "Hello World" text span 17 is defined by the 200px wide float before shape-outside image has been loaded and 18 by the 100px wide image segment after it has been loaded. 19 </p> 20 <div id="container"> 21 <img src="support/left-half-rectangle.png" id="shape"><span id="text">Hello World</span> 22 </div> 23 <script> 24 function elementRect(elementId) { 25 var s = document.getElementById("container").getBoundingClientRect(); 26 var r = document.getElementById(elementId).getBoundingClientRect(); 27 return {left: r.left - s.left, top: r.top - s.top, 28 width: r.width, height: r.height}; 29 } 30 31 async_test(t => { 32 assert_equals(elementRect("text").left, 200, 'image not loaded'); 33 34 window.onload = t.step_func_done(() => { 35 document.body.offsetTop; // Force a layout. 36 37 assert_equals(elementRect("text").left, 100, 'image loaded'); 38 }); 39 }); 40 </script>