Chromium Code Reviews Chromium Code Reviews
Issue 1895443002:
[css-grid] Implement auto-repeat computation (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <link href="resources/grid.css" rel="stylesheet"> | |
| 3 <style> | |
| 4 .grid { | |
| 5 grid-auto-rows: 25px; | |
| 6 grid-auto-columns: 25px; | |
| 7 margin-bottom: 10px; | |
| 8 } | |
| 9 | |
| 10 .fixedWidth { | |
| 11 width: 50px; | |
| 12 grid-auto-flow: row; | |
| 13 grid-template-columns: repeat(auto-fill, 25px); | |
| 14 } | |
| 15 | |
| 16 .fixedHeight { | |
| 17 width: 100px; | |
| 18 height: 50px; | |
| 19 grid-auto-flow: column; | |
| 20 grid-template-rows: repeat(auto-fill, 25px); | |
| 21 } | |
| 22 | |
| 23 #i1, #i21 { | |
| 24 grid-row: auto; | |
| 25 grid-column: 1; | |
| 26 background-color: red; | |
|
Manuel Rego
2016/04/22 12:57:04
I'd use a different color and not red
as it's not
| |
| 27 } | |
| 28 | |
| 29 #i2, #i22 { | |
| 30 grid-row: 1; | |
| 31 grid-column: auto; | |
| 32 background-color: green; | |
| 33 } | |
| 34 | |
| 35 #i3, #i23 { | |
| 36 grid-row: auto; | |
| 37 grid-column: auto; | |
| 38 background-color: blue; | |
| 39 } | |
| 40 </style> | |
| 41 <!-- Explicitly not using layout-th because it does not allow multiple checkLayo ut(). --> | |
|
Manuel Rego
2016/04/22 12:57:04
Not sure if this comment is needed, but ok.
Weird
| |
| 42 <script src="../../resources/check-layout.js"></script> | |
| 43 <script> | |
| 44 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) | |
| 45 { | |
| 46 var gridElement = document.getElementById(id); | |
| 47 gridElement.style.gridTemplateRows = gridTemplateRows; | |
| 48 gridElement.style.gridTemplateColumns = gridTemplateColumns; | |
| 49 } | |
| 50 | |
| 51 function setGridSize(id, width, height) | |
| 52 { | |
| 53 var gridElement = document.getElementById(id); | |
| 54 gridElement.style.width = width; | |
| 55 gridElement.style.height = height; | |
| 56 } | |
| 57 | |
| 58 function testGridDefinitions(firstGridItemData, secondGridItemData, thirdGridIte mData) | |
| 59 { | |
| 60 var i1 = document.getElementById(firstGridItemData.id); | |
| 61 i1.setAttribute("data-expected-width", firstGridItemData.width); | |
| 62 i1.setAttribute("data-expected-height", firstGridItemData.height); | |
| 63 i1.setAttribute("data-offset-x", firstGridItemData.x); | |
| 64 i1.setAttribute("data-offset-y", firstGridItemData.y); | |
| 65 | |
| 66 var i2 = document.getElementById(secondGridItemData.id); | |
| 67 i2.setAttribute("data-expected-width", secondGridItemData.width); | |
| 68 i2.setAttribute("data-expected-height", secondGridItemData.height); | |
| 69 i2.setAttribute("data-offset-x", secondGridItemData.x); | |
| 70 i2.setAttribute("data-offset-y", secondGridItemData.y); | |
| 71 | |
| 72 var i3 = document.getElementById(thirdGridItemData.id); | |
| 73 i3.setAttribute("data-expected-width", thirdGridItemData.width); | |
| 74 i3.setAttribute("data-expected-height", thirdGridItemData.height); | |
| 75 i3.setAttribute("data-offset-x", thirdGridItemData.x); | |
| 76 i3.setAttribute("data-offset-y", thirdGridItemData.y); | |
| 77 | |
| 78 checkLayout(".grid"); | |
| 79 } | |
| 80 | |
| 81 function testChangingGridDefinitions() | |
| 82 { | |
| 83 // Test changing the number of auto-repeat tracks. | |
| 84 setGridTemplate('grid1', '', 'repeat(auto-fill, 25px)'); | |
| 85 testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' }); | |
| 86 setGridTemplate('grid2', 'repeat(auto-fill, 25px)', ''); | |
| 87 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' }); | |
| 88 | |
| 89 setGridTemplate('grid1', '', 'none'); | |
|
Manuel Rego
2016/04/22 12:57:04
Nit: '' and 'none' are the same,
maybe just use on
| |
| 90 testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' }); | |
| 91 setGridTemplate('grid2', 'none', ''); | |
| 92 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' }); | |
| 93 | |
| 94 setGridTemplate('grid1', '', '5px repeat(auto-fill, 20px)'); | |
| 95 testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', ' y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' }); | |
| 96 setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', ''); | |
| 97 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' }); | |
| 98 | |
| 99 setGridTemplate('grid1', '', 'repeat(auto-fill, 45px)'); | |
| 100 testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' }); | |
| 101 setGridTemplate('grid2', 'repeat(auto-fill, 45px)', ''); | |
| 102 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '45', 'x': '50', 'y': '0' }); | |
|
Manuel Rego
2016/04/22 12:57:04
Just being picky, in all the cases you're actually
| |
| 103 | |
| 104 // Test changing the size of the grid. | |
| 105 setGridSize('grid1', '100px', 'auto'); | |
| 106 testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' }); | |
| 107 setGridSize('grid2', '100px', '100px'); | |
| 108 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '45', 'x': '25', 'y': '45' }); | |
| 109 } | |
| 110 | |
| 111 window.addEventListener("load", testChangingGridDefinitions, false); | |
| 112 </script> | |
| 113 | |
| 114 <div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div> | |
| 115 <div id="log"></div> | |
| 116 | |
| 117 <div style="position: relative"> | |
| 118 <div id="grid1" class="grid fixedWidth"> | |
| 119 <div id="i1"></div> | |
| 120 <div id="i2"></div> | |
| 121 <div id="i3"></div> | |
| 122 </div> | |
| 123 </div> | |
| 124 | |
| 125 <div style="position: relative"> | |
| 126 <div id="grid2" class="grid fixedHeight"> | |
| 127 <div id="i21"></div> | |
| 128 <div id="i22"></div> | |
| 129 <div id="i23"></div> | |
| 130 </div> | |
| 131 </div> | |
| OLD | NEW |
