flexbox-dyn-changePadding-1b.xhtml

Enable keyboard shortcuts

<?xml version="1.0" encoding="UTF-8"?>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!--

    This test checks that we reflow sufficiently when a stretched, nested

    flex container needs an incremental reflow.  This test should end up

    rendering as a lime square, 100px by 100px.

-->

<html xmlns="http://www.w3.org/1999/xhtml"

      class="reftest-wait">

  <head>

    <style>

      #outerContainer {

        display: flex;

        width: 100px;

        height: 100px;

        background: red;

      #tweakMe {

        display: flex;

        background: orange;

        width: 100px;

        /* height should stretch to fill parent's height, via

         * parent's "align-items: stretch" (the default) */

        padding-left: 1px;

    </style>

    <script>

      function tweak() {

        var tweakMe = document.getElementById("tweakMe");

        tweakMe.style.paddingLeft = "0";

        tweakMe.style.background = "lime";

        document.documentElement.removeAttribute("class");

      window.addEventListener("MozReftestInvalidate", tweak, false);

    </script>

  </head>

  <body>

    <div id="outerContainer">

      <div id="tweakMe"></div>

    </div>

  </body>

</html>