Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(28)

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html

Issue 1920953002: Revert of [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698