layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml

   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 checks that we reflow sufficiently when a stretched, nested
   8     flex container needs an incremental reflow.  This test should end up
   9     rendering as a lime square, 100px by 100px.
  10 -->
  11 <html xmlns="http://www.w3.org/1999/xhtml"
  12       class="reftest-wait">
  13   <head>
  14     <style>
  15       #outerContainer {
  16         display: flex;
  17         width: 100px;
  18         height: 100px;
  19         background: red;
  20       }
  21       #tweakMe {
  22         display: flex;
  23         background: orange;
  24         width: 100px;
  25         /* height should stretch to fill parent's height, via
  26          * parent's "align-items: stretch" (the default) */
  27
  28         padding-left: 1px;
  29       }
  30     </style>
  31     <script>
  32       function tweak() {
  33         var tweakMe = document.getElementById("tweakMe");
  34         tweakMe.style.paddingLeft = "0";
  35         tweakMe.style.background = "lime";
  36         document.documentElement.removeAttribute("class");
  37       }
  38       window.addEventListener("MozReftestInvalidate", tweak, false);
  39     </script>
  40   </head>
  41   <body>
  42     <div id="outerContainer">
  43       <div id="tweakMe"></div>
  44     </div>
  45   </body>
  46 </html>