| <!DOCTYPE html> |
| <html> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <body> |
| <style> |
| .grid { |
| grid-template-rows: repeat(5, 100px); |
| grid-template-columns: repeat(5, 100px); |
| background-color: red; |
| } |
| |
| .gridItem { |
| height: 100%; |
| width: 100%; |
| background-color: purple; |
| } |
| |
| .scrolledDiv { |
| height: 100px; |
| width: 100px; |
| overflow: hidden; |
| } |
| </style> |
| <div>This test checks that we correctly paint scrolled grid container.</div> |
| <div>There should be no red below.</div> |
| |
| <div>Default writing mode (horizontal-lr)</div> |
| |
| <!-- An item in the middle of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100"> |
| <div class="grid fit-content"> |
| <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom: 100px green solid;"></div> |
| </div> |
| </div> |
| |
| <!-- Bottom-right corner of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400"> |
| <div class="grid fit-content"> |
| <div class="gridItem" style="grid-column: 4; grid-row: 5; border-right: 100px green solid;"></div> |
| </div> |
| </div> |
| |
| <!-- Bottom-right corner of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400"> |
| <div class="grid fit-content"> |
| <div class="gridItem" style="grid-column: 4; grid-row: 5; border-left: 100px purple solid; background-color: green;"></div> |
| </div> |
| </div> |
| |
| <div>Flipped writing mode (vertical-rl)</div> |
| |
| <!-- An item in the middle of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200"> |
| <div class="grid fit-content verticalLR"> |
| <div class="gridItem" style="grid-column: 2; grid-row: 2; border-right: 100px green solid;"></div> |
| </div> |
| </div> |
| |
| <!-- Bottom-right corner of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400"> |
| <div class="grid fit-content verticalLR"> |
| <div class="gridItem" style="grid-column: 4; grid-row: 5; border-bottom: 100px green solid;"></div> |
| </div> |
| </div> |
| |
| <!-- Bottom-right corner of the grid. --> |
| <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400"> |
| <div class="grid fit-content verticalLR"> |
| <div class="gridItem" style="grid-column: 4; grid-row: 5; border-top: 100px purple solid; background-color: green;"></div> |
| </div> |
| </div> |
| |
| |
| <script> |
| var scrolledDivs = document.getElementsByClassName("scrolledDiv"); |
| for (i = 0; i < scrolledDivs.length; ++i) { |
| scrolledDiv = scrolledDivs[i]; |
| scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top"); |
| scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left"); |
| } |
| </script> |
| </body> |
| </html> |
