layout/reftests/flexbox/flexbox-dyn-changeContent-2.html

   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>