Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html |
deleted file mode 100644 |
index 3d63755a7ec2f9a1618c69c21a56497ca493e797..0000000000000000000000000000000000000000 |
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html |
+++ /dev/null |
@@ -1,136 +0,0 @@ |
-<!DOCTYPE html> |
-<link href="resources/grid.css" rel="stylesheet"> |
-<style> |
-.grid { |
- grid-auto-rows: 25px; |
- grid-auto-columns: 25px; |
- margin-bottom: 10px; |
-} |
- |
-.fixedWidth { |
- width: 50px; |
- grid-auto-flow: row; |
- grid-template-columns: repeat(auto-fill, 25px); |
-} |
- |
-.fixedHeight { |
- width: 100px; |
- height: 50px; |
- grid-auto-flow: column; |
- grid-template-rows: repeat(auto-fill, 25px); |
-} |
- |
-#i1, #i21 { |
- grid-row: auto; |
- grid-column: 1; |
- background-color: orange; |
-} |
- |
-#i2, #i22 { |
- grid-row: 1; |
- grid-column: auto; |
- background-color: green; |
-} |
- |
-#i3, #i23 { |
- grid-row: auto; |
- grid-column: auto; |
- background-color: blue; |
-} |
-</style> |
-<!-- Explicitly not using layout-th because it does not allow multiple checkLayout(). --> |
-<script src="../../resources/check-layout.js"></script> |
-<script> |
-function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) |
-{ |
- var gridElement = document.getElementById(id); |
- gridElement.style.gridTemplateRows = gridTemplateRows; |
- gridElement.style.gridTemplateColumns = gridTemplateColumns; |
-} |
- |
-function setGridSize(id, width, height) |
-{ |
- var gridElement = document.getElementById(id); |
- gridElement.style.width = width; |
- gridElement.style.height = height; |
-} |
- |
-function testGridDefinitions(firstGridItemData, secondGridItemData, thirdGridItemData) |
-{ |
- var i1 = document.getElementById(firstGridItemData.id); |
- i1.setAttribute("data-expected-width", firstGridItemData.width); |
- i1.setAttribute("data-expected-height", firstGridItemData.height); |
- i1.setAttribute("data-offset-x", firstGridItemData.x); |
- i1.setAttribute("data-offset-y", firstGridItemData.y); |
- |
- var i2 = document.getElementById(secondGridItemData.id); |
- i2.setAttribute("data-expected-width", secondGridItemData.width); |
- i2.setAttribute("data-expected-height", secondGridItemData.height); |
- i2.setAttribute("data-offset-x", secondGridItemData.x); |
- i2.setAttribute("data-offset-y", secondGridItemData.y); |
- |
- var i3 = document.getElementById(thirdGridItemData.id); |
- i3.setAttribute("data-expected-width", thirdGridItemData.width); |
- i3.setAttribute("data-expected-height", thirdGridItemData.height); |
- i3.setAttribute("data-offset-x", thirdGridItemData.x); |
- i3.setAttribute("data-offset-y", thirdGridItemData.y); |
- |
- checkLayout(".grid"); |
-} |
- |
-function testChangingGridDefinitions() |
-{ |
- // Test changing the number of auto-repeat tracks. |
- setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)'); |
- 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' }); |
- setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none'); |
- 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' }); |
- |
- setGridTemplate('grid1', 'none', 'none'); |
- 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' }); |
- setGridTemplate('grid2', 'none', 'none'); |
- 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' }); |
- |
- setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)'); |
- 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' }); |
- setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none'); |
- 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' }); |
- |
- setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)'); |
- testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' }); |
- setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none'); |
- testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' }); |
- |
- setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)'); |
- 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' }); |
- setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none'); |
- 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' }); |
- |
- // Test changing the size of the grid. |
- setGridSize('grid1', '100px', 'auto'); |
- 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' }); |
- setGridSize('grid2', '100px', '100px'); |
- 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' }); |
-} |
- |
-window.addEventListener("load", testChangingGridDefinitions, false); |
-</script> |
- |
-<div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div> |
-<div id="log"></div> |
- |
-<div style="position: relative"> |
- <div id="grid1" class="grid fixedWidth"> |
- <div id="i1"></div> |
- <div id="i2"></div> |
- <div id="i3"></div> |
- </div> |
-</div> |
- |
-<div style="position: relative"> |
- <div id="grid2" class="grid fixedHeight"> |
- <div id="i21"></div> |
- <div id="i22"></div> |
- <div id="i23"></div> |
- </div> |
-</div> |