flexbox-dyn-changeContent-2.html (952B)
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 height 6 on the purple flex item "itemA", in response to the height of its flex 7 container being dynamically changed. --> 8 <style> 9 #flex { 10 display: inline-flex; 11 flex-direction: column; 12 border: 1px solid black; 13 max-width: 50px; 14 height: 60px; 15 } 16 #itemA { 17 background: purple; 18 height: 50%; 19 flex: none; 20 } 21 #itemB { 22 background: lightblue; 23 flex: none; 24 } 25 </style> 26 <script> 27 function tweak() { 28 document.getElementById("flex").style.height = "150px"; 29 document.documentElement.removeAttribute("class"); 30 } 31 window.addEventListener("MozReftestInvalidate", tweak, false); 32 </script> 33 </head> 34 <body> 35 <div id="flex"> 36 <div id="itemA">A</div> 37 <div id="itemB">BB</div> 38 </div> 39 </body> 40 </html>