flexbox-inlinecontent-horiz-1b.xhtml (1453B)
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 inserts a new div into some inline content in a flex container. 8 That should split the inline content into two flex items. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml" 11 class="reftest-wait"> 12 <head> 13 <link rel="stylesheet" type="text/css" href="ahem.css" /> 14 <script> 15 function tweak() { 16 var flexbox = document.getElementsByClassName("flexbox")[0]; 17 var insertionPoint = flexbox.firstChild.nextSibling.nextSibling; 18 19 var newDiv = document.createElement("div"); 20 newDiv.setAttribute("class", "b"); 21 22 flexbox.insertBefore(newDiv, insertionPoint); 23 24 document.documentElement.removeAttribute("class"); 25 } 26 27 window.addEventListener("MozReftestInvalidate", tweak, false); 28 </script> 29 <style> 30 div { height: 100px; } 31 div.flexbox { 32 font: 10px Ahem; 33 width: 200px; 34 display: flex; 35 } 36 div.a { 37 flex: 1 0 20px; 38 background: lightgreen; 39 } 40 div.b { 41 flex: 2 0 30px; 42 background: yellow; 43 } 44 div.inflex { 45 flex: 0 0 20px; 46 background: gray; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="flexbox" 52 ><div class="a"/>text<i>italic</i 53 ><div class="inflex"/></div> 54 </body> 55 </html>