| OLD | NEW | 
|   1 <!DOCTYPE HTML> |   1 <!DOCTYPE HTML> | 
|   2 <script src="resources/text-based-repaint.js"></script> |  | 
|   3 <script> |  | 
|   4 function repaintTest() { |  | 
|   5   document.getElementsByClassName('item1')[0].style.justifySelf = 'left'; |  | 
|   6   document.getElementsByClassName('item2')[0].style.justifySelf = 'right'; |  | 
|   7 } |  | 
|   8 onload = runRepaintTest; |  | 
|   9 </script> |  | 
|  10 <style> |   2 <style> | 
|  11 body { |   3 body { | 
|  12   margin: 0; |   4   margin: 0; | 
|  13 } |   5 } | 
|  14 #container { |   6 #container { | 
|  15   display: grid; |   7   display: grid; | 
|  16   grid: 100px 100px / 150px 150px; |   8   grid: 100px 100px / 150px 150px; | 
|  17   width: 200px; |   9   width: 200px; | 
|  18   height: 300px; |  10   height: 300px; | 
|  19   background-color: red; |  11   background-color: red; | 
|  20 } |  12 } | 
|  21 .item1 { |  13 .item1 { | 
|  22   grid-row: 1; |  14   grid-row: 1; | 
|  23   grid-column: 1; |  15   grid-column: 1; | 
|  24   justify-self: start; |  16   justify-self: left; | 
|  25   background-color: green; |  17   background-color: green; | 
|  26   width: 50px; |  18   width: 50px; | 
|  27 } |  19 } | 
|  28 .item2 { |  20 .item2 { | 
|  29   grid-row: 1; |  21   grid-row: 1; | 
|  30   grid-column: 2; |  22   grid-column: 2; | 
|  31   justify-self: end; |  23   justify-self: right; | 
|  32   background-color: green; |  24   background-color: green; | 
|  33   width: 50px; |  25   width: 50px; | 
|  34 </style> |  26 </style> | 
|  35 <p style="height: 20px">Tests invalidation on justify-self style change. Passes 
    if there is no red.</p> |  27 <p style="height: 20px">Tests invalidation on justify-self style change. Passes 
    if there is no red.</p> | 
|  36 <div id="container"> |  28 <div id="container"> | 
|  37   <div class="item1"> |  29   <div class="item1"> | 
|  38     <div style="height: 150px"></div> |  30     <div style="height: 150px"></div> | 
|  39   </div> |  31   </div> | 
|  40   <div class="item2"> |  32   <div class="item2"> | 
|  41     <div style="height: 100px"></div> |  33     <div style="height: 100px"></div> | 
|  42   </div> |  34   </div> | 
|  43 </div> |  35 </div> | 
| OLD | NEW |