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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html

Issue 21205004: [CSS Grid Layout] Store m_grid across layout (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Updated change after Ojan's review Created 7 years, 5 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
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html b/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
new file mode 100644
index 0000000000000000000000000000000000000000..5872dd89be07a5f06cfd76acb6069fa5e05d6034
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+.grid {
+ grid-auto-flow: row;
+}
+#firstGridItem {
+ grid-row: auto;
+ grid-column: 'column';
+}
+
+#secondGridItem {
+ grid-row: 'row';
+ grid-column: auto;
+}
+
+#thirdGridItem {
+ grid-row: auto;
+ grid-column: auto;
+}
+</style>
+<script>
+function testGridDefinitions(gridDefinitionRows, gridDefinitionColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+ var gridElement = document.getElementsByClassName("grid")[0];
+ gridElement.style.gridDefinitionRows = gridDefinitionRows;
+ gridElement.style.gridDefinitionColumns = gridDefinitionColumns;
+
+ var firstGridItem = document.getElementById("firstGridItem");
+ firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
+ firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
+ firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
+ firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
+
+ var secondGridItem = document.getElementById("secondGridItem");
+ secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
+ secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
+ secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
+ secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
+
+ var thirdGridItem = document.getElementById("thirdGridItem");
+ thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
+ thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
+ thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
+ thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
+
+ checkLayout(".grid");
+}
+
+function testChangingGridDefinitions()
+{
+ testGridDefinitions('10px "row" 20px', '30px "column"', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+ testGridDefinitions('10px "row" 20px', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' });
+ testGridDefinitions('10px 20px "row"', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' });
+ testGridDefinitions('10px 20px "row"', '30px "column"', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+}
+
+window.addEventListener("load", testChangingGridDefinitions, false);
+</script>
+<body>
+<div>This test checks that updating the named grid lines definitions in grid-definition-{rows|columns} recomputes the positions of automatically placed grid items.</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div class="sizedToGridArea" id="firstGridItem"></div>
+ <div class="sizedToGridArea" id="secondGridItem"></div>
+ <div class="sizedToGridArea" id="thirdGridItem"></div>
+ </div>
+</div>
+
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698