remove-wrapped-002.html (1316B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1902156"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> 5 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 6 <link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> 7 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 8 <link rel="author" href="https://mozilla.org" title="Mozilla"> 9 <style> 10 #flex { 11 display: flex; 12 width: 100px; 13 justify-content: center; 14 background: red; 15 /* This gap ensures that we'll see some of the red background, 16 if there ends up being more than 1 flex item. */ 17 gap: 90px; 18 } 19 #swatch { 20 width: 100px; 21 height: 100px; 22 background: green; 23 } 24 </style> 25 <script> 26 function go() { 27 /* The fact that we have (and take) a linewrap opportunity 28 in "foo bar" is important be able to trigger the bug: */ 29 let whitespace = document.createTextNode(" "); 30 let text = document.createTextNode("foo bar"); 31 flex.appendChild(whitespace); 32 flex.appendChild(text); 33 flex.offsetHeight; 34 text.remove(); 35 } 36 </script> 37 <body onload="go()"> 38 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 39 <div id="flex"><div id="swatch"></div></div>