| <!DOCTYPE html> |
| <title>Test for auto-fit and auto-fill with huge grids (lots of tracks)</title> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet"> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <style> |
| .wideGrid { width: 1000000000px; } |
| .tallGrid { height: 1000000000px; } |
| |
| .width25k { width: 25000px; } |
| .height25k { height: 25000px; } |
| |
| .lastColumn { grid-column: -2 / -1; } |
| .lastRow { grid-row: -2 / -1; } |
| |
| .minSizeWideGrid { min-width: 1000000000px; } |
| .minSizeTallGrid { min-height: 1000000000px; } |
| |
| .lotsOfFixedRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px 2px 8px) repeat(992, 1px); } |
| .lotsOfFixedRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(995, 1px); } |
| |
| .lotsOfAutoRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px 2px 8px) repeat(10, 1px); } |
| .lotsOfAutoRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(10, 1px); } |
| |
| .lotsOfFixedRepeatWithAutoFitColsReversed { grid-template-columns: repeat(992, 1px) repeat(auto-fit, 10px 2px 8px); } |
| .lotsOfFixedRepeatWithAutoFillColsReversed { grid-template-columns: repeat(995, 1px) repeat(auto-fill, 10px 2px 8px 7px 20px); } |
| |
| .lotsOfFixedRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px 8px) repeat(992, 1px); } |
| .lotsOfFixedRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(995, 1px); } |
| |
| .lotsOfAutoRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px 8px) repeat(10, 1px); } |
| .lotsOfAutoRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2px 8px 7px 20px) repeat(10, 1px); } |
| |
| .lotsOfFixedRepeatWithAutoFitRowsReversed { grid-template-rows: repeat(992, 1px) repeat(auto-fit, 10px 2px 8px); } |
| .lotsOfFixedRepeatWithAutoFillRowsReversed { grid-template-rows: repeat(995, 1px) repeat(auto-fill, 10px 2px 8px 7px 20px); } |
| |
| .autoFitRows25px { grid-template-rows: repeat(auto-fit, 10px 2px 8px 5px); } |
| .autoFitCols25px { grid-template-columns: repeat(auto-fit, 10px 2px 8px 5px); } |
| |
| .autoFillRows25px { grid-template-rows: repeat(auto-fill, 17px 8px); } |
| .autoFillCols25px { grid-template-columns: repeat(auto-fill, 2px 23px); } |
| |
| .autoFitRows205pxFixed5px { grid-template-rows: repeat(900, 5px) repeat(auto-fit, 20px 50px 13px 50px 72px); } |
| .autoFitCols205pxFixed5px { grid-template-columns: repeat(900, 5px) repeat(auto-fit, 20px 50px 13px 50px 72px); } |
| |
| .autoFillRows205pxFixed5px { grid-template-rows: repeat(900, 5px) repeat(auto-fill, 200px 5px); } |
| .autoFillCols205pxFixed5px { grid-template-columns: repeat(900, 5px) repeat(auto-fill, 200px 5px); } |
| |
| .autoFitAndAThousandFixedRows { grid-template-rows: repeat(auto-fit, 20px 50px 72px) repeat(1000, 37px); } |
| .autoFitAndAThousandFixedCols { grid-template-columns: repeat(auto-fit, 20px 50px 72px) repeat(1000, 37px); } |
| |
| .autoFillAndAThousandFixedRows { grid-template-rows: repeat(auto-fill, 2px) repeat(1000, 37px); } |
| .autoFillAndAThousandFixedCols { grid-template-columns: repeat(auto-fill, 2px) repeat(1000, 37px); } |
| |
| .autoFitAndMoreThanThousandFixedRows { grid-template-rows: repeat(700, 7px) repeat(auto-fit, 11px 13px 125px) repeat(600, 6px); } |
| .autoFitAndMoreThanThousandFixedCols { grid-template-columns: repeat(700, 7px) repeat(auto-fit, 11px 13px 125px) repeat(600, 6px); } |
| |
| .autoFillAndMoreThanThousandFixedRows { grid-template-rows: repeat(700, 7px) repeat(auto-fill, 20px 50px 72px) repeat(600, 6px); } |
| .autoFillAndMoreThanThousandFixedCols { grid-template-columns: repeat(700, 7px) repeat(auto-fill, 20px 50px 72px) repeat(600, 6px); } |
| |
| .handMadeMoreThanThousandAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 999px); } |
| .handMadeMoreThanThousandAutoFillCols { grid-template-columns: repeat(auto-fill, 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 999px); } |
| |
| .handMadeMoreThanThousandAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 999px); } |
| .handMadeMoreThanThousandAutoFitCols { grid-template-columns: repeat(auto-fit, 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 10px 2px 13px 1px 3px 8px 7px 2px 12px 5px 999px); } |
| |
| </style> |
| |
| <div id="wideAutoFillGrid" class="grid wideGrid lotsOfFixedRepeatWithAutoFillCols"></div> |
| <div id="wideAutoFitGrid" class="grid wideGrid lotsOfFixedRepeatWithAutoFitCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="autoFillGrid" class="grid tallGrid lotsOfFixedRepeatWithAutoFillRows"></div> |
| <div id="autoFitGrid" class="grid tallGrid lotsOfFixedRepeatWithAutoFitRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="wideAutoFillGridFewRepetitions" class="grid wideGrid lotsOfAutoRepeatWithAutoFillCols"></div> |
| <div id="wideAutoFitGridFewRepetitions" class="grid wideGrid lotsOfAutoRepeatWithAutoFitCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="tallAutoFillGridFewRepetitions" class="grid tallGrid lotsOfAutoRepeatWithAutoFillRows"></div> |
| <div id="tallAutoFitGridFewRepetitions" class="grid tallGrid lotsOfAutoRepeatWithAutoFitRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="wideAutoFillGridReversed" class="grid wideGrid lotsOfFixedRepeatWithAutoFillColsReversed"></div> |
| <div id="wideAutoFitGridReversed" class="grid wideGrid lotsOfFixedRepeatWithAutoFitColsReversed"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="tallAutoFillGridReversed" class="grid tallGrid lotsOfFixedRepeatWithAutoFillRowsReversed"></div> |
| <div id="tallAutoFitGridReversed" class="grid tallGrid lotsOfFixedRepeatWithAutoFitRowsReversed"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="wideAutoFillGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithAutoFillCols minSizeWideGrid min-content"></div> |
| <div id="wideAutoFitGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithAutoFitCols minSizeWideGrid min-content"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="tallAutoFillGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithAutoFillRows minSizeTallGrid min-content"></div> |
| <div id="tallAutoFitGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithAutoFitRows minSizeTallGrid min-content"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="aThousandAutoFillRows" class="grid height25k autoFillRows25px"></div> |
| <div id="aThousandAutoFitRows" class="grid height25k autoFitRows25px"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="aThousandAutoFillCols" class="grid width25k autoFillCols25px"></div> |
| <div id="aThousandAutoFitCols" class="grid width25k autoFitCols25px"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="aThousandAutoFillAndFixedRows" class="grid height25k autoFillRows205pxFixed5px"></div> |
| <div id="aThousandAutoFitAndFixedRows" class="grid height25k autoFitRows205pxFixed5px"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="aThousandAutoFillAndFixedCols" class="grid width25k autoFillCols205pxFixed5px"></div> |
| <div id="aThousandAutoFitAndFixedCols" class="grid width25k autoFitCols205pxFixed5px"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="aThousandFixedZeroAutoFillRows" class="grid height25k autoFillAndAThousandFixedRows"></div> |
| <div id="aThousandFixedZeroAutoFitRows" class="grid height25k autoFitAndAThousandFixedRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="aThousandFixedZeroAutoFillCols" class="grid width25k autoFillAndAThousandFixedCols"></div> |
| <div id="aThousandFixedZeroAutoFitCols" class="grid width25k autoFitAndAThousandFixedCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| |
| <div id="aThousandFixedZeroAutoFillRowsFreeSpace" class="grid tallGrid autoFillAndAThousandFixedRows"></div> |
| <div id="aThousandFixedZeroAutoFitRowsFreeSpace" class="grid tallGrid autoFitAndAThousandFixedRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="aThousandFixedZeroAutoFillColsFreeSpace" class="grid wideGrid autoFillAndAThousandFixedCols"></div> |
| <div id="aThousandFixedZeroAutoFitColsFreeSpace" class="grid wideGrid autoFitAndAThousandFixedCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="moreThanAThousandFixedZeroAutoFillRows" class="grid height25k autoFillAndMoreThanThousandFixedRows"></div> |
| <div id="moreThanAThousandFixedZeroAutoFitRows" class="grid height25k autoFitAndMoreThanThousandFixedRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="moreThanAThousandFixedZeroAutoFillCols" class="grid width25k autoFillAndMoreThanThousandFixedCols"></div> |
| <div id="moreThanAThousandFixedZeroAutoFitCols" class="grid width25k autoFitAndMoreThanThousandFixedCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <div id="handMadeAutoFillRows" class="grid tallGrid handMadeMoreThanThousandAutoFillRows"></div> |
| <div id="handMadeAutoFitRows" class="grid tallGrid handMadeMoreThanThousandAutoFitRows"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastRow">Item3</div> |
| </div> |
| |
| <div id="handMadeAutoFillCols" class="grid wideGrid handMadeMoreThanThousandAutoFillCols"></div> |
| <div id="handMadeAutoFitCols" class="grid wideGrid handMadeMoreThanThousandAutoFitCols"> |
| <div>Item1</div> |
| <div>Item2</div> |
| <div class="lastColumn">Item3</div> |
| </div> |
| |
| <script> |
| function testElement(element, property, length) { |
| var propertyValue = getComputedStyle(document.getElementById(element), '').getPropertyValue(property); |
| |
| if (propertyValue == "") { |
| assert_equals(length, 0); |
| return []; |
| } |
| |
| var tracks = propertyValue.split(' '); |
| assert_equals(tracks.length, length); |
| return tracks; |
| } |
| |
| test(function() { |
| var autoFillGrid = testElement("wideAutoFillGrid", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("wideAutoFitGrid", "grid-template-columns", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "10px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFitGrid[0], "10px"); |
| assert_equals(autoFitGrid[1], "2px"); |
| |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| assert_equals(autoFillGrid[0], "10px"); |
| assert_equals(autoFillGrid[1], "2px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids (normal tracks clamped)."); |
| |
| test(function() { |
| var autoFillGrid = testElement("autoFillGrid", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("autoFitGrid", "grid-template-rows", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "10px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFitGrid[0], "10px"); |
| assert_equals(autoFitGrid[1], "2px"); |
| |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| assert_equals(autoFillGrid[0], "10px"); |
| assert_equals(autoFillGrid[1], "2px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids (normal tracks clamped)."); |
| |
| test(function() { |
| var autoFillGrid = testElement("wideAutoFillGridReversed", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("wideAutoFitGridReversed", "grid-template-columns", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "2px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFitGrid[0], "1px"); |
| assert_equals(autoFitGrid[1], "1px"); |
| |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| assert_equals(autoFillGrid[0], "1px"); |
| assert_equals(autoFillGrid[1], "1px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids (auto repeat tracks clamped)."); |
| |
| test(function() { |
| var autoFillGrid = testElement("tallAutoFillGridReversed", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("tallAutoFitGridReversed", "grid-template-rows", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "2px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFitGrid[0], "1px"); |
| assert_equals(autoFitGrid[1], "1px"); |
| |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| assert_equals(autoFillGrid[0], "1px"); |
| assert_equals(autoFillGrid[1], "1px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids (auto repeat tracks clamped)."); |
| |
| test(function() { |
| var fillGridElement = document.getElementById("wideAutoFillGridFewRepetitions"); |
| var fitGridElement = document.getElementById("wideAutoFitGridFewRepetitions"); |
| |
| fillGridElement.style.gridGap = "100px"; |
| fitGridElement.style.gridGap = "100px"; |
| |
| var autoFillGrid = testElement("wideAutoFillGridFewRepetitions", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("wideAutoFitGridFewRepetitions", "grid-template-columns", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "10px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| |
| fillGridElement.style.gridGap = "1000000px"; |
| fitGridElement.style.gridGap = "1000000px"; |
| |
| testElement("wideAutoFillGridFewRepetitions", "grid-template-columns", 30); |
| testElement("wideAutoFitGridFewRepetitions", "grid-template-columns", 34); |
| |
| fillGridElement.style.gridGap = "0px"; |
| fitGridElement.style.gridGap = "0px"; |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids with gaps."); |
| |
| test(function() { |
| var autoFillGridElement = document.getElementById("tallAutoFillGridFewRepetitions"); |
| var autoFitGridElement = document.getElementById("tallAutoFitGridFewRepetitions"); |
| |
| autoFillGridElement.style.gridGap = "100px"; |
| autoFitGridElement.style.gridGap = "100px"; |
| |
| var autoFillGrid = testElement("tallAutoFillGridFewRepetitions", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("tallAutoFitGridFewRepetitions", "grid-template-rows", 1000); |
| |
| assert_equals(autoFitGrid[1000 - 1], "10px"); |
| assert_equals(autoFitGrid[1000 - 2], "0px"); |
| assert_equals(autoFillGrid[1000 - 1], "20px"); |
| assert_equals(autoFillGrid[1000 - 2], "7px"); |
| |
| autoFillGridElement.style.gridGap = "1000000px"; |
| autoFitGridElement.style.gridGap = "1000000px"; |
| |
| testElement("tallAutoFillGridFewRepetitions", "grid-template-rows", 30); |
| testElement("tallAutoFitGridFewRepetitions", "grid-template-rows", 34); |
| |
| autoFillGridElement.style.gridGap = "0px"; |
| autoFitGridElement.style.gridGap = "0px"; |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids with gaps."); |
| |
| test(function() { |
| var autoFillCols = testElement("wideAutoFillGridFewRepetitionsMinSize", "grid-template-columns", 1000); |
| var autoFitCols = testElement("wideAutoFitGridFewRepetitionsMinSize", "grid-template-columns", 1000); |
| |
| /* Check that clamping auto repetitions does not reduce the amount of the other tracks. */ |
| assert_equals(autoFillCols[1000 - 1], "20px"); |
| assert_equals(autoFillCols[1000 - 2], "7px"); |
| assert_equals(autoFitCols[1000 - 1], "10px"); |
| assert_equals(autoFitCols[1000 - 2], "0px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very wide grids with gaps and min-width."); |
| |
| test(function() { |
| var autoFillRows = testElement("tallAutoFillGridFewRepetitionsMinSize", "grid-template-rows", 1000); |
| var autoFitRows = testElement("tallAutoFitGridFewRepetitionsMinSize", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillRows[1000 - 1], "20px"); |
| assert_equals(autoFillRows[1000 - 2], "7px"); |
| assert_equals(autoFitRows[1000 - 1], "10px"); |
| assert_equals(autoFitRows[1000 - 2], "0px"); |
| }, "Test that we don't get more than kGridMaxTracks repetitions even on very tall grids with gaps and min-height."); |
| |
| test(function() { |
| var autoFillRows = testElement("aThousandAutoFillRows", "grid-template-rows", 1000); |
| var autoFitRows = testElement("aThousandAutoFitRows", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillRows[1000 - 1], "8px"); |
| assert_equals(autoFillRows[1000 - 2], "17px"); |
| assert_equals(autoFitRows[1000 - 1], "5px"); |
| assert_equals(autoFitRows[1000 - 2], "0px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks auto repeat rows on very tall grids."); |
| |
| test(function() { |
| var autoFillCols = testElement("aThousandAutoFillCols", "grid-template-columns", 1000); |
| var autoFitCols = testElement("aThousandAutoFitCols", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillCols[1000 - 1], "23px"); |
| assert_equals(autoFillCols[1000 - 2], "2px"); |
| assert_equals(autoFitCols[1000 - 1], "5px"); |
| assert_equals(autoFitCols[1000 - 2], "0px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks auto repeat columns on very wide grids."); |
| |
| test(function() { |
| var autoFillRows = testElement("aThousandAutoFillAndFixedRows", "grid-template-rows", 1000); |
| var autoFitRows = testElement("aThousandAutoFitAndFixedRows", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillRows[1000 - 1], "5px"); |
| assert_equals(autoFillRows[1000 - 2], "200px"); |
| assert_equals(autoFitRows[1000 - 1], "72px"); |
| assert_equals(autoFitRows[1000 - 2], "0px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks (normal and auto-repeat) rows on very tall grids."); |
| |
| test(function() { |
| var autoFillCols = testElement("aThousandAutoFillAndFixedCols", "grid-template-columns", 1000); |
| var autoFitCols = testElement("aThousandAutoFitAndFixedCols", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillCols[1000 - 1], "5px"); |
| assert_equals(autoFillCols[1000 - 2], "200px"); |
| assert_equals(autoFitCols[1000 - 1], "72px"); |
| assert_equals(autoFitCols[1000 - 2], "0px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks (normal and auto-repeat) columns on very wide grids."); |
| |
| test(function() { |
| var autoFillGrid = testElement("aThousandFixedZeroAutoFillRows", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("aThousandFixedZeroAutoFitRows", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "37px"); |
| assert_equals(autoFillGrid[0], "2px"); |
| assert_equals(autoFitGrid[1000 - 1], "37px"); |
| assert_equals(autoFitGrid[0], "20px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat rows on very tall grids."); |
| |
| test(function() { |
| var autoFillGrid = testElement("aThousandFixedZeroAutoFillCols", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("aThousandFixedZeroAutoFitCols", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "37px"); |
| assert_equals(autoFillGrid[0], "2px"); |
| assert_equals(autoFitGrid[1000 - 1], "37px"); |
| assert_equals(autoFitGrid[0], "20px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat columns on very wide grids."); |
| |
| test(function() { |
| var autoFillGrid = testElement("aThousandFixedZeroAutoFillRowsFreeSpace", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("aThousandFixedZeroAutoFitRowsFreeSpace", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "2px"); |
| assert_equals(autoFillGrid[0], "2px"); |
| assert_equals(autoFitGrid[1000 - 1], "20px"); |
| assert_equals(autoFitGrid[0], "20px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat rows on very tall grids with enough room for auto repetitions."); |
| |
| test(function() { |
| var autoFillGrid = testElement("aThousandFixedZeroAutoFillColsFreeSpace", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("aThousandFixedZeroAutoFitColsFreeSpace", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "2px"); |
| assert_equals(autoFillGrid[0], "2px"); |
| assert_equals(autoFitGrid[1000 - 1], "20px"); |
| assert_equals(autoFitGrid[0], "20px"); |
| }, "Test that we don't crash when there are exactly kGridMaxTracks non auto-repeat columns on very wide grids with enough room for auto repetitions."); |
| |
| test(function() { |
| var autoFillGrid = testElement("moreThanAThousandFixedZeroAutoFillRows", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("moreThanAThousandFixedZeroAutoFitRows", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "72px"); |
| assert_equals(autoFillGrid[0], "7px"); |
| assert_equals(autoFitGrid[1000 - 1], "125px"); |
| assert_equals(autoFitGrid[0], "7px"); |
| }, "Test that we don't crash when there are more than kGridMaxTracks non auto-repeat rows on very tall grids."); |
| |
| test(function() { |
| var autoFillGrid = testElement("moreThanAThousandFixedZeroAutoFillCols", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("moreThanAThousandFixedZeroAutoFitCols", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "72px"); |
| assert_equals(autoFillGrid[0], "7px"); |
| assert_equals(autoFitGrid[1000 - 1], "125px"); |
| assert_equals(autoFitGrid[0], "7px"); |
| }, "Test that we don't crash when there are more than kGridMaxTracks non auto-repeat columns on very wide grids."); |
| |
| test(function() { |
| var autoFillGrid = testElement("handMadeAutoFillRows", "grid-template-rows", 1000); |
| var autoFitGrid = testElement("handMadeAutoFitRows", "grid-template-rows", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "5px"); |
| assert_equals(autoFillGrid[0], "10px"); |
| assert_equals(autoFitGrid[1000 - 1], "5px"); |
| assert_equals(autoFitGrid[0], "10px"); |
| }, "Test that we don't crash when there are more than kGridMaxTracks rows in the auto repeat <track-list>."); |
| |
| test(function() { |
| var autoFillGrid = testElement("handMadeAutoFillCols", "grid-template-columns", 1000); |
| var autoFitGrid = testElement("handMadeAutoFitCols", "grid-template-columns", 1000); |
| |
| assert_equals(autoFillGrid[1000 - 1], "5px"); |
| assert_equals(autoFillGrid[0], "10px"); |
| assert_equals(autoFitGrid[1000 - 1], "5px"); |
| assert_equals(autoFitGrid[0], "10px"); |
| }, "Test that we don't crash when there are more than kGridMaxTracks columns in the auto repeat <track-list>."); |
| |
| </script> |
