Skip to content

GitLab

T
tangled
Commit ec8e5565 authored by Julie Jeongeun Kim's avatar Julie Jeongeun Kim Committed by Commit Bot
Browse files
Options

[css-grid] Migrate grid-dynamic-updates-relayout.html to WPT 

This CL migrates grid-dynamic-updates-relayout.html to
external/wpt/css/css-grid/grid-definition, adding links to the relevant
specs and a test assertion describing its purpose, renaming it to
grid-template-columns-rows-changes-001.html.

Bug: 1063749
Change-Id: I077502f4b40d0c0744d775c9a0382097b8a31672
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2154360Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Commit-Queue: Julie Kim <jkim@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760349}
parent e897b800
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 37 deletions
third_party/blink/web_tests/fast/css-grid-layout/grid-dynamic-updates-relayout.html → third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html
View file @ ec8e5565
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<link href="resources/grid.css" rel="stylesheet"> <title>CSS Grid: grid-tempalte-{rows|colums} dynamic updates</title>
<link href="resources/grid-alignment.css" rel="stylesheet"> <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
<script src="../../resources/check-layout.js"></script> <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=112501">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<meta name="assert" content="This test checks that grid-tempalte-{rows|colums} dynamic updates properly relayout the grid items.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script> <script>
function testLayout(gridElementID, gridTracks, size) setup({ explicit_done: true });
function testLayout(gridElementID, gridTracks, size, last = false)
{ {
var gridElement = document.getElementById(gridElementID); var gridElement = document.getElementById(gridElementID);
gridElement.style.gridTemplateColumns = gridTracks.columns; gridElement.style.gridTemplateColumns = gridTracks.columns;
...@@ -12,7 +22,7 @@ function testLayout(gridElementID, gridTracks, size) ...@@ -12,7 +22,7 @@ function testLayout(gridElementID, gridTracks, size)
var gridItem = gridElement.firstChild.nextSibling; var gridItem = gridElement.firstChild.nextSibling;
gridItem.setAttribute("data-expected-width", size.width); gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height); gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID, document.getElementById("test-output")); checkLayout("#" + gridElementID, last);
} }
function updateRowsColumns() function updateRowsColumns()
...@@ -40,13 +50,10 @@ function updateRowsColumns() ...@@ -40,13 +50,10 @@ function updateRowsColumns()
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' }); testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' }); testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' }); testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }); testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }, true);
} }
window.addEventListener("load", updateRowsColumns, false);
</script> </script>
<body> <body onload="document.fonts.ready.then(() => { updateRowsColumns(); })">
<div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div>
<div class="constrainedContainer"> <div class="constrainedContainer">
<div class="grid" id="constrainedGrid" style="height: 100%"> <div class="grid" id="constrainedGrid" style="height: 100%">
<div class="sizedToGridArea">XXXXX XXXXXX</div> <div class="sizedToGridArea">XXXXX XXXXXX</div>
...@@ -65,7 +72,5 @@ window.addEventListener("load", updateRowsColumns, false); ...@@ -65,7 +72,5 @@ window.addEventListener("load", updateRowsColumns, false);
</div> </div>
</div> </div>
<div id="test-output"></div>
</body> </body>
</html> </html>
third_party/blink/web_tests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt deleted 100644 → 0
View file @ e897b800
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
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
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