third_party/WebKit/LayoutTests/fast/repaint/justify-content-position-change.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('container').style.justifyContent = 'flex-start';
   6 }
   7 onload = runRepaintTest;
   8 </script>
   9 <style>
  10 body {
  11   margin: 0;
  12 }
  13 #container {
  14   display: flex;
  15   justify-content: center;
  16   width: 200px;
  17   height: 300px;
  18   background-color: orange;
  19 }
  20 .item {
  21   background-color: green;
  22   border: solid thin blue;
  23   width: 50px;
  24 }
  25 </style>
  26 <p style="height: 20px">Tests invalidation on justify-content style change. Passes if only one big orange bar appear aligned to the box's right edge.</p>
  27 <div id="container">
  28   <div class="item">
  29     <div style="height: 50px"></div>
  30   </div>
  31   <div class="item">
  32     <div style="height: 50px"></div>
  33   </div>
  34 </div>