| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1902156"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> |
| <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> |
| <link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> |
| <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> |
| <link rel="author" href="https://mozilla.org" title="Mozilla"> |
| <style> |
| #flex { |
| display: flex; |
| width: 100px; |
| justify-content: center; |
| background: red; |
| /* This gap ensures that we'll see some of the red background, |
| if there ends up being more than 1 flex item. */ |
| gap: 90px; |
| } |
| #swatch { |
| width: 100px; |
| height: 100px; |
| background: green; |
| } |
| </style> |
| <script> |
| function go() { |
| /* The fact that we have (and take) a linewrap opportunity |
| in "foo bar" is important be able to trigger the bug: */ |
| let whitespace = document.createTextNode(" "); |
| let text = document.createTextNode("foo bar"); |
| flex.appendChild(whitespace); |
| flex.appendChild(text); |
| flex.offsetHeight; |
| text.remove(); |
| } |
| </script> |
| <body onload="go()"> |
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> |
| <div id="flex"><div id="swatch"></div></div> |
