dynamic-shape-outside-2.html (1184B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>Dynamic change to shape-outside</title> 6 <style> 7 .circle { 8 float: left; 9 width: 25vmin; 10 height: 25vmin; 11 background: #f06; 12 shape-outside: circle(100%); 13 } 14 </style> 15 <script> 16 function doTest() { 17 let circle = document.querySelector(".circle"); 18 circle.style.shapeOutside = "circle()"; 19 20 document.documentElement.removeAttribute('class'); 21 } 22 document.addEventListener("MozReftestInvalidate", doTest); 23 </script> 24 </head> 25 <body> 26 <div class="circle"></div> 27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent 28 scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta 29 tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem 30 placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean 31 mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam 32 facilisis aliquam elit, ut consequat quam interdum sit amet. Integer 33 bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque 34 tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere 35 enim in tempor imperdiet. 36 </body> 37 </html>