| Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-fit-content-argument.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-fit-content-argument.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-fit-content-argument.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9ac99c69b3d20b233f7527041f10631b5c48d4fe
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-fit-content-argument.html
|
| @@ -0,0 +1,64 @@
|
| +<!DOCTYPE html>
|
| +<link href="resources/grid.css" rel="stylesheet">
|
| +<style>
|
| +.grid {
|
| + width: fit-content;
|
| + position: relative;
|
| + justify-content: start;
|
| + align-content: start;
|
| + font: 25px/1 Ahem;
|
| +}
|
| +
|
| +.verticalLR {
|
| + writing-mode: vertical-lr;
|
| +}
|
| +</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 testGridItemDefinitions(gridItemData)
|
| +{
|
| + var item = document.getElementById(gridItemData.id);
|
| + item.setAttribute("data-expected-width", gridItemData.width);
|
| + item.setAttribute("data-expected-height", gridItemData.height);
|
| + item.setAttribute("data-offset-x", gridItemData.x);
|
| + item.setAttribute("data-offset-y", gridItemData.y);
|
| +
|
| + checkLayout(".grid");
|
| +}
|
| +
|
| +function testChangingGridDefinitions()
|
| +{
|
| + // Test changing the argument of fit-content() tracks.
|
| + setGridTemplate("grid1", "none", "fit-content(100px)");
|
| + testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" });
|
| +
|
| + setGridTemplate("grid1", "none", "fit-content(150px)");
|
| + testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" });
|
| +
|
| + setGridTemplate("grid2", "fit-content(100px)", "none");
|
| + testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
|
| +
|
| + setGridTemplate("grid2", "fit-content(150px)", "none");
|
| + testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
|
| +}
|
| +
|
| +window.addEventListener("load", testChangingGridDefinitions, false);
|
| +</script>
|
| +
|
| +<div>This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.</div>
|
| +
|
| +<div id="grid1" class="grid">
|
| + <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
|
| +</div>
|
| +
|
| +<div id="grid2" class="grid">
|
| + <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
|
| +</div>
|
|
|
Chromium Code Reviews
Issue 2420673002:
[css-grid] Recompute track sizes if fit-content() argument is modified (Closed)
