third_party/WebKit/LayoutTests/css3/flexbox/repaint-during-resize-no-flex.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link rel="stylesheet" href="resources/flexbox.css">
   5 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   6 <style>
   7 body {
   8     margin: 0;
   9 }
  10 .flexbox {
  11     background: #333;
  12 }
  13 .flex-item {
  14     height: 50px;
  15     margin: 20px;
  16     background: #eee;
  17     width: 10px;
  18 }
  19
  20 .width {
  21     width:50px;
  22 }
  23 </style>
  24 </head>
  25 <body>
  26 <div class="flexbox">
  27     <div id="flex-item-1" class="flex-item"></div>
  28     <div class="flex-item"></div>
  29     <div class="flex-item"></div>
  30 </div>
  31 <script>
  32 function repaintTest() {
  33     var div = document.getElementById("flex-item-1");
  34     div.classList.add("width");
  35 }
  36 window.onload = function() {
  37     if (!window.testRunner) {
  38         document.body.appendChild(document.createTextNode(
  39             "Tests to make sure that when changing the size of one flex item changes the "
  40             + "location of another flex item, we properly repaint. The repaint rect should "
  41             + "include the three flex items."));
  42     }
  43     window.enablePixelTesting = true;
  44     runRepaintTest();
  45 };
  46 </script>
  47 </body></html>