flexbox-dyn-changeContent-1.html (904B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- This testcase ensures that we correctly re-evaluate the percent width on 6 the purple flex item "itemA", in response to the width of its flex 7 container changing due to the other item gaining some more content. --> 8 <style> 9 #flex { 10 display: inline-flex; 11 border: 1px solid black; 12 } 13 #itemA { 14 background: purple; 15 width: 50%; 16 flex: none; 17 } 18 #itemB { 19 background: lightblue; 20 flex: none; 21 } 22 </style> 23 <script> 24 function tweak() { 25 document.getElementById("itemB").innerText = "BBBBB"; 26 document.documentElement.removeAttribute("class"); 27 } 28 window.addEventListener("MozReftestInvalidate", tweak, false); 29 </script> 30 </head> 31 <body> 32 <div id="flex"> 33 <div id="itemA"></div> 34 <div id="itemB">BB</div> 35 </div> 36 </body> 37 </html>