Skip to content

GitLab

T
tangled
Commit 8cd900c7 authored by rego@igalia.com's avatar rego@igalia.com
Browse files
Options

[CSS Grid Layout] Prevent issues with checkLayout() in grid items 

When we use checkLayout() on a grid item, the results (PASS or FAIL
messages) are added as new auto-placed items in the grid. This causes
that the grid is marked as dirty which could hide bugs in the tests.

Modify the related layout tests to use a different container for the
test results. Updated expectations accordingly.

There is one test missing
"grid-item-addition-auto-placement-update.html". Which will be modified
in the patch to fix the bug in RenderGrid::addChild() (see
https://codereview.chromium.org/198703004/).

Review URL: https://codereview.chromium.org/208133003

git-svn-id: svn://svn.chromium.org/blink/trunk@169777 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent dd97f207
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 43 deletions
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt
View file @ 8cd900c7
This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.
XXXXX XXXXXX
XXXXX XXXXXX
XXXXX XXXXXX
PASS
PASS
PASS
......@@ -9,7 +11,6 @@ PASS
PASS
PASS
PASS
XXXXX XXXXXX
PASS
PASS
PASS
......@@ -19,7 +20,6 @@ PASS
PASS
PASS
PASS
XXXXX XXXXXX
PASS
PASS
PASS
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html
View file @ 8cd900c7
......@@ -24,12 +24,12 @@ function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
gridItem.setAttribute("data-expected-width", gridItemSize.width);
gridItem.setAttribute("data-expected-height", gridItemSize.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, document.getElementById("test-output"));
}
function updateGridAutoRowsColumns()
{
checkLayout('.grid');
checkLayout('.grid', document.getElementById("test-output"));
// The constrained example is always sized to the min width so we don't test max width.
updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
......@@ -84,5 +84,7 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
</div>
</div>
<div id="test-output"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt
View file @ 8cd900c7
This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.
XXXXX XXXXXX
XXXXX XXXXXX
XXXXX XXXXXX
PASS
PASS
PASS
PASS
PASS
PASS
XXXXX XXXXXX
PASS
PASS
PASS
PASS
PASS
PASS
XXXXX XXXXXX
PASS
PASS
PASS
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html
View file @ 8cd900c7
......@@ -11,7 +11,7 @@ function testLayout(gridElementID, gridTracks, size)
var gridItem = gridElement.firstChild.nextSibling;
gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, document.getElementById("test-output"));
}
function updateRowsColumns()
......@@ -63,5 +63,8 @@ window.addEventListener("load", updateRowsColumns, false);
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
<div id="test-output"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update-expected.txt
View file @ 8cd900c7
This test checks that the tracks' auto positions are recomputed after removing a grid item.
XXXXX XXXXX XXXXX
XXXXX XXXXX XXXXX
XXXXX XXXXX XXXXX
XXXXX XXXXX XXXXX
PASS
PASS
PASS
PASS
PASS
XXXXX XXXXX XXXXX
PASS
PASS
PASS
PASS
PASS
XXXXX XXXXX XXXXX
PASS
PASS
PASS
PASS
PASS
XXXXX XXXXX XXXXX
PASS
PASS
PASS
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
View file @ 8cd900c7
......@@ -20,30 +20,31 @@ function testRemoval(gridElementID, autoFlowElementID, size)
autoFlowElement.setAttribute("data-expected-width", size.width);
autoFlowElement.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, document.getElementById("test-output"));
}
function testRemovals()
{
checkLayout("#autoFlowColumnElement");
var testOutput = document.getElementById("test-output");
checkLayout("#autoFlowColumnElement", testOutput);
testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
checkLayout("#autoFlowRowElement");
checkLayout("#autoFlowRowElement", testOutput);
testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '100' });
testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '50' });
testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
checkLayout("#gridAutoFlowColumnWithAutoItems");
checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput);
testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '50' });
testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '100' });
testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '50' });
checkLayout("#gridAutoFlowRowWithAutoAndFixedItems");
checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput);
testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
......@@ -95,5 +96,7 @@ window.addEventListener("load", testRemovals, false);
</div>
</div>
<div id="test-output"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt
View file @ 8cd900c7
This test checks that the tracks' breadth are recomputed after removing a grid item.
XXX XXX XXX
XXX XXX XXX
XXX XXX XXX
XXX XXX XXX
XXX XXX XXX
XXX XXX XXX
XXX XXX XXX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
XX XX XX XX XX XX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XXX XXX XXX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
XX XX XX XX XX XX
PASS
PASS
PASS
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html
View file @ 8cd900c7
......@@ -43,6 +43,7 @@
<script>
function testRemoval(gridElementID, size1, size2, size3)
{
var testOutput = document.getElementById("test-output");
var gridElement = document.getElementById(gridElementID);
var gridItem1 = gridElement.firstChild.nextSibling;
var gridItem2 = gridItem1.nextSibling.nextSibling;
......@@ -53,19 +54,19 @@ function testRemoval(gridElementID, size1, size2, size3)
gridItem2.setAttribute("data-expected-height", size1.height);
gridItem3.setAttribute("data-expected-width", size1.width);
gridItem3.setAttribute("data-expected-height", size1.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, testOutput);
gridElement.removeChild(gridItem1);
gridItem2.setAttribute("data-expected-width", size2.width);
gridItem2.setAttribute("data-expected-height", size2.height);
gridItem3.setAttribute("data-expected-width", size2.width);
gridItem3.setAttribute("data-expected-height", size2.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, testOutput);
gridElement.removeChild(gridItem2);
gridItem3.setAttribute("data-expected-width", size3.width);
gridItem3.setAttribute("data-expected-height", size3.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, testOutput);
}
function testRemovals()
......@@ -279,5 +280,7 @@ window.addEventListener("load", testRemovals, false);
</div>
</div>
<div id="test-output"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html
View file @ 8cd900c7
......@@ -26,7 +26,7 @@ function testLayout(gridElementID, gridTracks, size)
var gridItem = gridElement.firstChild.nextSibling;
gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID)
checkLayout("#" + gridElementID, document.getElementById("test-output"))
}
function runTests()
......@@ -56,5 +56,7 @@ window.addEventListener("load", runTests, false);
<div id="maxHeightPercent"></div>
</div>
<div id="test-output"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt
View file @ 8cd900c7
This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.
XXXX XXXX XXXX
XXXX XXXX XXXX
XXXXXX XXXXXX
PASS
PASS
PASS
......@@ -22,7 +24,6 @@ PASS
PASS
PASS
PASS
XXXX XXXX XXXX
PASS
PASS
PASS
......@@ -44,7 +45,6 @@ PASS
PASS
PASS
PASS
XXXXXX XXXXXX
PASS
PASS
PASS
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html
View file @ 8cd900c7
......@@ -16,7 +16,7 @@ function testPosition(gridElementID, position, size)
gridItem.style.gridRow = position.row;
gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID);
checkLayout("#" + gridElementID, document.getElementById("test-output"));
}
function updateImplicitGridColumn()
......@@ -121,5 +121,7 @@ window.addEventListener("load", updateImplicitGridColumn, false);
<div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
</div>
<div id="test-output"></div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment