<?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>