layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html

   1 <!DOCTYPE html>
   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 repaint, when a flex item is brought towards
   8     the viewer in the stacking-order, without moving in the "x" or "y"
   9     dimensions onscreen, using the "order" and "margin-left" properties.
  10
  11     This test should end up rendering as a lime square, 100px by 100px.
  12 -->
  13 <html class="reftest-wait">
  14 <head>
  15 <style>
  16 #container {
  17   display: flex;
  18 }
  19
  20 #container > * {
  21   width: 100px;
  22   height: 100px;
  23 }
  24
  25 #a {
  26   background-color: red;
  27 }
  28
  29 #b {
  30   background-color: lime;
  31 }
  32
  33 .foreground {
  34   order: 1;
  35   margin-left: -100px;
  36 }
  37 </style>
  38 <script>
  39   function tweak() {
  40     var a = document.getElementById("a");
  41     var b = document.getElementById("b");
  42     a.classList.remove("foreground");
  43     b.classList.add("foreground");
  44     document.documentElement.removeAttribute("class");
  45   }
  46
  47   window.addEventListener("MozReftestInvalidate", tweak);
  48 </script>
  49 </head>
  50 <body>
  51   <div id="container">
  52     <div id="a" class="foreground"></div>
  53     <div id="b"></div>
  54   </div>
  55 </body>
  56 </html>