third_party/WebKit/LayoutTests/fast/repaint/justify-items-legacy-change.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('parentContainer').style.justifyItems = 'legacy center';
   6 }
   7 onload = runRepaintTest;
   8 </script>
   9 <style>
  10 body {
  11   margin: 0;
  12 }
  13 #parentContainer {
  14   justify-items: center;
  15   background-color: orange;
  16   width: 300px;
  17   height: 400px;
  18 }
  19
  20 #container {
  21   display: grid;
  22   grid: 100px 100px / 150px 150px;
  23   width: 200px;
  24   height: 300px;
  25   background-color: red;
  26 }
  27 .item1 {
  28   grid-row: 1;
  29   grid-column: 1;
  30   background-color: green;
  31   border: solid thin blue;
  32   width: 50px;
  33 }
  34 .item2 {
  35   grid-row: 1;
  36   grid-column: 2;
  37   background-color: green;
  38   border: solid thin blue;
  39   width: 50px;
  40 </style>
  41 <p style="height: 20px">Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.</p>
  42 <div id="parentContainer">
  43     <div id="container">
  44         <div class="item1">
  45             <div style="height: 50px"></div>
  46         </div>
  47         <div class="item2">
  48             <div style="height: 50px"></div>
  49         </div>
  50     </div>
  51 </div>