| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>Test for auto-fit and auto-fill with huge grids (lots of tracks)</title> |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re
l="stylesheet"> |
| 6 |
| 7 <script src="../../resources/testharness.js"></script> |
| 8 <script src="../../resources/testharnessreport.js"></script> |
| 9 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 10 <style> |
| 11 .wideGrid { width: 1000000000px; } |
| 12 .tallGrid { height: 1000000000px; } |
| 13 |
| 14 .minSizeWideGrid { min-width: 1000000000px; } |
| 15 .minSizeTallGrid { min-height: 1000000000px; } |
| 16 |
| 17 .lotsOfFixedRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px
2px 8px) repeat(992, 1px); } |
| 18 .lotsOfFixedRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10
px 2px 8px 7px 20px) repeat(995, 1px); } |
| 19 |
| 20 .lotsOfAutoRepeatWithAutoFitCols { grid-template-columns: repeat(auto-fit, 10px
2px 8px) repeat(10, 1px); } |
| 21 .lotsOfAutoRepeatWithAutoFillCols { grid-template-columns: repeat(auto-fill, 10p
x 2px 8px 7px 20px) repeat(10, 1px); } |
| 22 |
| 23 .lotsOfFixedRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2p
x 8px) repeat(992, 1px); } |
| 24 .lotsOfFixedRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px
2px 8px 7px 20px) repeat(995, 1px); } |
| 25 |
| 26 .lotsOfAutoRepeatWithAutoFitRows { grid-template-rows: repeat(auto-fit, 10px 2px
8px) repeat(10, 1px); } |
| 27 .lotsOfAutoRepeatWithAutoFillRows { grid-template-rows: repeat(auto-fill, 10px 2
px 8px 7px 20px) repeat(10, 1px); } |
| 28 </style> |
| 29 |
| 30 <div id="wideAutoFillGrid" class="grid wideGrid lotsOfFixedRepeatWithAutoFillCol
s"></div> |
| 31 <div id="wideAutoFitGrid" class="grid wideGrid lotsOfFixedRepeatWithAutoFitCols"
> |
| 32 <div>Item1</div> |
| 33 <div>Item2</div> |
| 34 <div>Item3</div> |
| 35 </div> |
| 36 |
| 37 <div id="tallAutoFillGrid" class="grid tallGrid lotsOfFixedRepeatWithAutoFillRow
s"></div> |
| 38 <div id="tallAutoFitGrid" class="grid tallGrid lotsOfFixedRepeatWithAutoFitRows"
> |
| 39 <div>Item1</div> |
| 40 <div>Item2</div> |
| 41 <div>Item3</div> |
| 42 </div> |
| 43 |
| 44 <div id="wideAutoFillGridFewRepetitions" class="grid wideGrid lotsOfAutoRepeatWi
thAutoFillCols"></div> |
| 45 <div id="wideAutoFitGridFewRepetitions" class="grid wideGrid lotsOfAutoRepeatWit
hAutoFitCols"> |
| 46 <div>Item1</div> |
| 47 <div>Item2</div> |
| 48 <div>Item3</div> |
| 49 </div> |
| 50 |
| 51 <div id="tallAutoFillGridFewRepetitions" class="grid tallGrid lotsOfAutoRepeatWi
thAutoFillRows"></div> |
| 52 <div id="tallAutoFitGridFewRepetitions" class="grid tallGrid lotsOfAutoRepeatWit
hAutoFitRows"> |
| 53 <div>Item1</div> |
| 54 <div>Item2</div> |
| 55 <div>Item3</div> |
| 56 </div> |
| 57 |
| 58 <div id="wideAutoFillGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWith
AutoFillCols minSizeWideGrid min-content"></div> |
| 59 <div id="wideAutoFitGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithA
utoFitCols minSizeWideGrid min-content"> |
| 60 <div>Item1</div> |
| 61 <div>Item2</div> |
| 62 <div>Item3</div> |
| 63 </div> |
| 64 |
| 65 <div id="tallAutoFillGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWith
AutoFillRows minSizeTallGrid min-content"></div> |
| 66 <div id="tallAutoFitGridFewRepetitionsMinSize" class="grid lotsOfAutoRepeatWithA
utoFitRows minSizeTallGrid min-content"> |
| 67 <div>Item1</div> |
| 68 <div>Item2</div> |
| 69 <div>Item3</div> |
| 70 </div> |
| 71 |
| 72 <script> |
| 73 function testElement(element, property, length) { |
| 74 var tracks = getComputedStyle(document.getElementById(element), '').getProp
ertyValue(property).split(' '); |
| 75 assert_equals(tracks.length, length); |
| 76 return tracks; |
| 77 } |
| 78 |
| 79 test(function() { |
| 80 testElement("wideAutoFillGrid", "grid-template-columns", 1000); |
| 81 testElement("wideAutoFitGrid", "grid-template-columns", 998); |
| 82 }, "Test that we don't get more than kGridMaxTracks repetitions even on very wid
e grids."); |
| 83 |
| 84 test(function() { |
| 85 testElement("tallAutoFillGrid", "grid-template-rows", 1000); |
| 86 testElement("tallAutoFitGrid", "grid-template-rows", 998); |
| 87 }, "Test that we don't get more than kGridMaxTracks repetitions even on very tal
l grids."); |
| 88 |
| 89 test(function() { |
| 90 var wideAutoFillGrid = document.getElementById("wideAutoFillGridFewRepetiti
ons"); |
| 91 var wideAutoFitGrid = document.getElementById("wideAutoFitGridFewRepetition
s"); |
| 92 |
| 93 wideAutoFillGrid.style.gridGap = "100px"; |
| 94 wideAutoFitGrid.style.gridGap = "100px"; |
| 95 |
| 96 testElement("wideAutoFillGridFewRepetitions", "grid-template-columns", 1000
); |
| 97 testElement("wideAutoFitGridFewRepetitions", "grid-template-columns", 1000)
; |
| 98 |
| 99 wideAutoFillGrid.style.gridGap = "1000000px"; |
| 100 wideAutoFitGrid.style.gridGap = "1000000px"; |
| 101 |
| 102 testElement("wideAutoFillGridFewRepetitions", "grid-template-columns", 130)
; |
| 103 testElement("wideAutoFitGridFewRepetitions", "grid-template-columns", 82); |
| 104 |
| 105 wideAutoFillGrid.style.gridGap = "0px"; |
| 106 wideAutoFitGrid.style.gridGap = "0px"; |
| 107 }, "Test that we don't get more than kGridMaxTracks repetitions even on very wid
e grids with gaps."); |
| 108 |
| 109 test(function() { |
| 110 var tallAutoFillGrid = document.getElementById("tallAutoFillGridFewRepetiti
ons"); |
| 111 var tallAutoFitGrid = document.getElementById("tallAutoFitGridFewRepetition
s"); |
| 112 |
| 113 tallAutoFillGrid.style.gridGap = "100px"; |
| 114 tallAutoFitGrid.style.gridGap = "100px"; |
| 115 |
| 116 testElement("tallAutoFillGridFewRepetitions", "grid-template-rows", 1000); |
| 117 testElement("tallAutoFitGridFewRepetitions", "grid-template-rows", 1000); |
| 118 |
| 119 tallAutoFillGrid.style.gridGap = "1000000px"; |
| 120 tallAutoFitGrid.style.gridGap = "1000000px"; |
| 121 |
| 122 testElement("tallAutoFillGridFewRepetitions", "grid-template-rows", 130); |
| 123 testElement("tallAutoFitGridFewRepetitions", "grid-template-rows", 82); |
| 124 |
| 125 tallAutoFillGrid.style.gridGap = "0px"; |
| 126 tallAutoFitGrid.style.gridGap = "0px"; |
| 127 }, "Test that we don't get more than kGridMaxTracks repetitions even on very tal
l grids with gaps."); |
| 128 |
| 129 test(function() { |
| 130 var autoFillCols = testElement("wideAutoFillGridFewRepetitionsMinSize", "gr
id-template-columns", 1000); |
| 131 var autoFitCols = testElement("wideAutoFitGridFewRepetitionsMinSize", "grid
-template-columns", 1000); |
| 132 |
| 133 /* Check that clamping auto repetitions does not reduce the amount of the o
ther tracks. */ |
| 134 assert_equals(autoFillCols[1000 - 10 - 1], "20px"); |
| 135 assert_equals(autoFillCols[1000 - 10], "1px"); |
| 136 assert_equals(autoFitCols[1000 - 10 - 1], "0px"); |
| 137 assert_equals(autoFitCols[1000 - 10], "1px"); |
| 138 |
| 139 var autoFillRows = testElement("tallAutoFillGridFewRepetitionsMinSize", "gr
id-template-rows", 1000); |
| 140 var autoFitRows = testElement("tallAutoFitGridFewRepetitionsMinSize", "grid
-template-rows", 1000); |
| 141 |
| 142 /* Check that clamping auto repetitions does not reduce the amount of the o
ther tracks. */ |
| 143 assert_equals(autoFillRows[1000 - 10 - 1], "20px"); |
| 144 assert_equals(autoFillRows[1000 - 10], "1px"); |
| 145 assert_equals(autoFitRows[1000 - 10 - 1], "0px"); |
| 146 assert_equals(autoFitRows[1000 - 10], "1px"); |
| 147 }, "Test that we don't get more than kGridMaxTracks repetitions even on very wi
de grids with gaps and min-width."); |
| 148 |
| 149 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2657863005:
[css-grid] Clamp the number of auto-repeat tracks (Closed)
