flexbox-inlinecontent-horiz-2.xhtml (1226B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This test removes a div from the middle of some inline content in a flex 8 container. That should merge the inline content into a single flex item. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml" 11 class="reftest-wait"> 12 <head> 13 <script> 14 function tweak() { 15 var removeMe = document.getElementById("removeMe"); 16 removeMe.parentNode.removeChild(removeMe); 17 document.documentElement.removeAttribute("class"); 18 } 19 window.addEventListener("MozReftestInvalidate", tweak, false); 20 </script> 21 <style> 22 div { height: 100px; } 23 div.flexbox { 24 width: 200px; 25 display: flex; 26 } 27 div.a { 28 flex: 1 0 20px; 29 background: lightgreen; 30 } 31 div.b { 32 flex: 2 0 30px; 33 background: yellow; 34 } 35 div.inflex { 36 flex: 0 0 20px; 37 background: gray; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="flexbox" 43 ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i 44 ><div class="inflex"/></div> 45 </body> 46 </html>