| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <body> | 4 <body> |
| 5 <style> | 5 <style> |
| 6 .grid { | 6 .grid { |
| 7 grid-template-rows: repeat(5, 100px); | 7 grid-template-rows: repeat(5, 100px); |
| 8 grid-template-columns: repeat(5, 100px); | 8 grid-template-columns: repeat(5, 100px); |
| 9 width: -webkit-fit-content; | 9 width: -webkit-fit-content; |
| 10 background-color: red; | 10 background-color: red; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .verticalRL { | 13 .verticalRL { |
| 14 -webkit-writing-mode: vertical-lr; | 14 -webkit-writing-mode: vertical-lr; |
| 15 } | 15 } |
| 16 | 16 |
| 17 .gridItem { | 17 .gridItem { |
| 18 height: 100%; | 18 height: 100%; |
| 19 width: 100%; | 19 width: 100%; |
| 20 background-color: purple; | 20 background-color: purple; |
| 21 } | 21 } |
| 22 | 22 |
| 23 .scrolledDiv { | 23 .scrolledDiv { |
| 24 height: 100px; | 24 height: 100px; |
| 25 width: 100px; | 25 width: 100px; |
| 26 overflow: hidden; | 26 overflow: hidden; |
| 27 } | 27 } |
| 28 </style> | 28 </style> |
| 29 <script> | |
| 30 if (window.testRunner) { | |
| 31 testRunner.testRepaint(); | |
| 32 testRunner.repaintSweepHorizontally(); | |
| 33 } | |
| 34 </script> | |
| 35 <div>This test checks that we correctly paint scrolled grid container.</div> | 29 <div>This test checks that we correctly paint scrolled grid container.</div> |
| 36 <div>There should be no red below.</div> | 30 <div>There should be no red below.</div> |
| 37 | 31 |
| 38 <div>Default writing mode (horizontal-lr)</div> | 32 <div>Default writing mode (horizontal-lr)</div> |
| 39 | 33 |
| 40 <!-- An item in the middle of the grid. --> | 34 <!-- An item in the middle of the grid. --> |
| 41 <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100"> | 35 <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100"> |
| 42 <div class="grid"> | 36 <div class="grid"> |
| 43 <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom:
100px green solid;"></div> | 37 <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom:
100px green solid;"></div> |
| 44 </div> | 38 </div> |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 85 <script> | 79 <script> |
| 86 var scrolledDivs = document.getElementsByClassName("scrolledDiv"); | 80 var scrolledDivs = document.getElementsByClassName("scrolledDiv"); |
| 87 for (i = 0; i < scrolledDivs.length; ++i) { | 81 for (i = 0; i < scrolledDivs.length; ++i) { |
| 88 scrolledDiv = scrolledDivs[i]; | 82 scrolledDiv = scrolledDivs[i]; |
| 89 scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top"); | 83 scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top"); |
| 90 scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left"); | 84 scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left"); |
| 91 } | 85 } |
| 92 </script> | 86 </script> |
| 93 </body> | 87 </body> |
| 94 </html> | 88 </html> |
| OLD | NEW |