zero-height-nondirty-reflow.html (1091B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Multi-column Layout Test: multi-column element with zero height</title> 5 <!-- 6 Based on 7 https://github.com/web-platform-tests/wpt/blob/1f346b050d87656a040fa4fdf9f99567164e2a2b/css/css-multicol/multicol-zero-height-001.xht 8 by Opera Software ASA. 9 --> 10 <style> 11 12 html { overflow: hidden } /* suppress scrollbar reflows */ 13 14 div#multi-column 15 { 16 height: 0; 17 orphans: 1; 18 widows: 1; 19 width: 200px; 20 border-bottom:1px solid red; 21 22 column-count: 10; 23 column-gap: 0; 24 display: inline-block; 25 } 26 27 div#multi-column > div 28 { 29 background: #0c0; 30 float: left; 31 height: 10px; 32 width: 20px; 33 } 34 </style> 35 </head> 36 <body style="height: 300px; width: 400px;"> 37 <p>Below should be a 1px tall and 200px wide green line:</p> 38 <div style="display: inline"> 39 <div id="multi-column"> 40 <div></div> 41 </div> 42 </div> 43 <script> 44 45 /* 46 * Cause the multi-column element to be reflowed without being dirty or any resize bits set. 47 */ 48 var e = document.body; 49 e.offsetWidth; 50 e.style.width = "300px"; 51 52 </script> 53 </body> 54 </html>