shape-image-029.html (1684B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shapes-from-image"/> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-outside-property"/> 5 <meta name="flags" content="ahem"/> 6 <meta name="assert" 7 content="WebKit and Blink had a bug that a negative margin was applied 8 incorrectly if float's writing-mode was different from the 9 container's writing-mode. This test verifies a browser has no 10 such bug."/> 11 <link rel="match" href="reference/shape-image-000-ref.html"/> 12 <link rel="stylesheet" href="/fonts/ahem.css" /> 13 <style> 14 .container { 15 width: 100px; 16 font: 10px/1 Ahem; 17 background-color: red; 18 color: rgb(0, 100, 0); 19 overflow: hidden; 20 } 21 #f { 22 display: inline-block; 23 width: 100px; 24 height: 100px; 25 background: url(support/left-half-rectangle.png); 26 shape-outside: url(support/left-half-rectangle.png); 27 float: left; 28 margin-left: -10px; 29 writing-mode: vertical-lr; 30 } 31 </style> 32 <p>The test passes if you see a solid green square. There should be no red.</p> 33 34 <div class="container"><span id="f"></span> 35 XXXXXX 36 XXXXXX 37 XXXXXX 38 XXXXXX 39 XXXXXX 40 XXXXXX 41 XXXXXX 42 XXXXXX 43 XXXXXX 44 XXXXXX 45 </div> 46 47 <script> 48 // A workaround of an issue of Chromium content_shell. It finishes a test 49 // without waiting images linked from url(). crbug.com/372756068 50 const image = new Image(); 51 image.src = 'support/left-half-rectangle.png'; 52 image.addEventListener('load', () => { 53 image.remove(); 54 requestAnimationFrame(() => { 55 requestAnimationFrame(() => { 56 document.documentElement.classList.remove('reftest-wait'); 57 }); 58 }); 59 }); 60 document.body.appendChild(image); 61 </script> 62 </html>