third_party/WebKit/LayoutTests/css3/flexbox/repaint-column-reverse.html

   1 <!DOCTYPE html>
   2 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   3 <style>
   4 #flexbox {
   5     display: flex;
   6     flex-flow: column-reverse;
   7     width: 200px;
   8 }
   9 .flex-item {
  10     height: 30px;
  11 }
  12 </style>
  13 <script>
  14 function repaintTest()
  15 {
  16     document.getElementById("blue").style.margin = "1px";
  17 }
  18
  19 window.onload = function() {
  20     if (!window.testRunner) {
  21         document.body.appendChild(document.createTextNode(
  22             "This test checks that for flex items that are moved multiple times during the layout "
  23             + "only the initial and final positions are repainted. Only the blue flex item should be repainted "
  24             + "after changing its position. If the other flex items are repainted, this test fails."));
  25     }
  26     window.enablePixelTesting = true;
  27     runRepaintTest();
  28 };
  29 </script>
  30 <div id="flexbox">
  31   <div id="blue" class="flex-item" style="background-color: blue;"></div>
  32   <div id="green" class="flex-item" style="background-color: green;"></div>
  33   <div id="yellow" class="flex-item" style="background-color: yellow;"></div>
  34 </div>