commit 03ff3a526171ea7819db93dc82216454f6edc026 parent 9f87b6497a7d6f27fea6214e1ee47ca153fe9464 Author: Alison Maher <almaher@microsoft.com> Date: Tue, 21 Oct 2025 10:38:26 +0000 Bug 1995406 [wpt PR 55365] - [Masonry] Add tests for intrinsic minimum logic, a=testonly Automatic update from web-platform-tests [Masonry] Add tests for intrinsic minimum logic These tests were ported from grid to masonry. The intrinsic minimum implementation for masonry will follow in a subsequent CL. Bug: 343257585 Change-Id: I65ab079fca986cacc944de5f29f4e9837879f658 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7014447 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Reviewed-by: Celeste Pan <celestepan@microsoft.com> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1532490} -- wpt-commits: 6acbc866d934835575ea6efc70bbd7b0d9bbedea wpt-pr: 55365 Diffstat:
47 files changed, 7865 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js @@ -22,6 +22,22 @@ var TestingUtils = (function() { }, (label ? label + " " : "") + "'" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); } + function testGridTemplateColumns(gridId, columnsStyle, columnsComputedValue, label) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateColumns = columnsStyle; + checkGridTemplateColumns(grid, columnsComputedValue); + }, (label ? label + " " : "") + "'" + gridId + "' with: grid-template-columns: " + columnsStyle + ";"); + } + + function testGridTemplateRows(gridId, rowsStyle, rowsComputedValue, label) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateRows = rowsStyle; + checkGridTemplateRows(grid, rowsComputedValue); + }, (label ? label + " " : "") + "'" + gridId +"with: grid-template-rows: " + rowsStyle + ";"); + } + function checkGridTemplateAreas(element, value) { if (!Array.isArray(value)) value = new Array(value); @@ -38,6 +54,8 @@ var TestingUtils = (function() { return { testGridTemplateColumnsRows: testGridTemplateColumnsRows, + testGridTemplateColumns: testGridTemplateColumns, + testGridTemplateRows: testGridTemplateRows, testGridTemplateAreas: testGridTemplateAreas } })(); diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-automatic-minimum-for-auto.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-automatic-minimum-for-auto.html @@ -0,0 +1,292 @@ +<!DOCTYPE html> +<title>CSS Masonry: automatic minimum in 'auto' columns</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"> +<meta name="assert" content="Check that masonry item's 'min-width' is honored when sizing 'auto' columns."> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.masonry { display: masonry; font: 10px/1 Ahem; } + +.minWidth10 { min-width: 10px; } +.minWidth20 { min-width: 20px; } +.minWidth30 { min-width: 30px; } +.minWidth40 { min-width: 40px; } +.minWidth50 { min-width: 50px; } +.minWidth60 { min-width: 60px; } +.minWidth70 { min-width: 70px; } +.minWidth90 { min-width: 90px; } +.minWidthMaxContent { min-width: max-content; } + +.width50 { width: 50px; } +.width60 { width: 60px; } +.width200 { width: 200px; } + +.border5 { border: 5px solid #abc; } +.padding8 { padding: 0px 8px 0px; } + +/* All these 4 cases are equivalent. We use them interchangeably. */ +.gridAuto { grid-template-columns: auto; } +.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); } +.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); } +.gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); } + +/* All these 3 cases are equivalent. We use them interchangeably. */ +.gridAutoAndAuto { grid-template-columns: auto auto; } +.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); } +.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAuto"> + <div class="firstRowFirstColumn minWidth40">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoItemSmallerThanMinSize"> + <div class="firstRowFirstColumn minWidth40">XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoAuto" id="gridMinMaxAutoAuto"> + <div class="firstRowFirstColumn minWidth40">XX XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent"> + <div class="firstRowFirstColumn minWidth40">XXX XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto"> + <div class="firstRowFirstColumn minWidth40">X X X X X X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMultipleItems"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div> + <div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn">XXXXXX</div> + <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn">XX XXXXXXXX</div> + <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren"> + <div class="firstRowFirstColumn width200 minWidth50"></div> + <div class="firstRowSecondColumn width50"></div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig"> + <div class="firstRowFirstColumn">XX XX</div> + <div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning"> + <div class="secondRowBothColumn minWidth60">XX XX XX</div> + <div class="firstRowSecondColumn">X X</div> + <div class="firstRowSecondColumn">XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning"> + <div class="firstRowSecondColumn">X XXX XX</div> + <div class="secondRowBothColumn minWidth70">XXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning"> + <div class="secondRowBothColumn minWidth70">XX XX XX</div> + <div class="firstRowBothColumn">XXXXX X XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning"> + <div class="firstRowSecondColumn minWidth60">X XXX XX</div> + <div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning"> + <div class="secondRowBothColumn">XX XX XX XX</div> + <div class="firstRowFirstColumn minWidth40">XXX</div> + <div class="firstRowBothColumn minWidth90">X XX XXX</div> + <div class="firstRowSecondColumn">X XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoWithFixedWidthChild"> + <div class="firstRowFirstColumn width60">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth"> + <div class="firstRowFirstColumn width60 minWidth40">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth"> + <div class="firstRowFirstColumn width60 minWidth90">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth"> + <div class="firstRowBothColumn width50">XX XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth"> + <div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth"> + <div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinWidthWithBorder"> + <div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinWidthWithPadding"> + <div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinWidthWithBorder"> + <div class="firstRowFirstColumn border5">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinWidthWithPadding"> + <div class="firstRowFirstColumn padding8">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinWidthWithBorder"> + <div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinWidthWithPadding"> + <div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div> + </div> +</div> + +<script> +function testGridColumnsValues(id, computedColumnValue) +{ + assert_equals(window.getComputedStyle(document.getElementById(id)) + .getPropertyValue('grid-template-columns'), computedColumnValue); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + test(() => { + testGridColumnsValues('gridAuto', '40px'); + testGridColumnsValues('gridAutoItemSmallerThanMinSize', '40px'); + testGridColumnsValues('gridMinMaxAutoAuto', '40px'); + testGridColumnsValues('gridMinMaxAutoMaxContent', '40px'); + testGridColumnsValues('gridMinMaxMinContentAuto', '40px'); + testGridColumnsValues('gridAutoMultipleItems', '30px'); + testGridColumnsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth', '60px'); + testGridColumnsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth', '80px'); + testGridColumnsValues('gridAutoAndAutoFixedWidthChildren', '200px 50px'); + }, 'Check that min-width is honored when sizing auto columns.'); + test(() => { + testGridColumnsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '35px 15px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '20px 40px'); + testGridColumnsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '20px 50px'); + testGridColumnsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px'); + testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px'); + testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '40px 50px'); + }, 'Check that min-width is honored when sizing auto columns and spanning grid items.'); + test(() => { + testGridColumnsValues('gridAutoWithFixedWidthChild', '60px'); + testGridColumnsValues('gridAutoWithFixedWidthChildAndMinWidth', '60px'); + testGridColumnsValues('gridAutoWithFixedWidthChildAndHigherMinWidth', '90px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidth', '25px 25px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndMinWidth', '30px 30px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth', '35px 35px'); + }, 'Check the interactions between width and min-width and auto tracks.'); + test(() => { + testGridColumnsValues('gridAutoFixedMinWidthWithBorder', '50px'); + testGridColumnsValues('gridAutoFixedMinWidthWithPadding', '56px'); + testGridColumnsValues('gridAutoFixedMinWidthWithBorderAndPadding', '66px'); + testGridColumnsValues('gridAutoAutoMinWidthWithBorder', '40px'); + testGridColumnsValues('gridAutoAutoMinWidthWithPadding', '46px'); + testGridColumnsValues('gridAutoAutoMinWidthWithBorderAndPadding', '56px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithBorder', '90px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithPadding', '96px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithBorderAndPadding', '106px'); + }, 'Check that borders and paddings are considering when computing min sizes.'); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-fit-content-percentage.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-fit-content-percentage.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: indefinite percentage in fit-content()</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizes" title="7.2.1. Track Sizes"> +<meta name="assert" content="Checks that an indefinite percentage in fit-content lets the masonry container grow enough to contain the max-content contribution of its masonry items."> +<style> +.container { + width: 200px; + margin-top: 10px; +} +.masonry { + display: inline-masonry; + background: blue; +} +.item { + background: orange; +} +.item::before, .item::after { + content: ''; + float: left; + width: 50px; + height: 50px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script> +"use strict"; +function clamp(value, min, max) { + return Math.max(min, Math.min(max, value)); +} +const minContent = 50; +const maxContent = 100; +for (const use_min_width of [false, true]) { + for (const use_calc of [false, true]) { + for (const percentage of [0, 50, 75, 100, 150]) { + const value = use_calc ? `fit-content(calc(0px + ${percentage}%))` + : `fit-content(${percentage}%)`; + const container = document.createElement("div"); + container.className = "container"; + document.body.appendChild(container); + const masonry = document.createElement("div"); + masonry.className = "masonry"; + masonry.style.gridTemplateColumns = value; + container.appendChild(masonry); + const item = document.createElement("div"); + item.className = "item"; + item.style.minWidth = use_min_width ? "auto" : "0px"; + masonry.appendChild(item); + test(function() { + const minWidth = use_min_width ? minContent : 0; + const colSize = clamp(percentage * maxContent / 100, minWidth, maxContent); + const height = colSize < maxContent ? maxContent : minContent; + assert_equals(item.offsetWidth, colSize, "Masonry item width"); + assert_equals(item.offsetHeight, height, "Masonry item height"); + assert_equals(masonry.offsetWidth, maxContent, "Masonry container width"); + assert_equals(masonry.offsetHeight, height, "Masonry container height"); + assert_equals(getComputedStyle(masonry).gridTemplateColumns, colSize + "px", + "Masonry column size"); + }, value + "; min-width: " + item.style.minWidth); + } + } +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-and-intrinsic-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-and-intrinsic-sizes.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>Auto Min Size is Zeroed When Spanning Flexible Tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="An item spanning >1 track, at least one of which is flexible, must have a zero automatic minimum size (and thus, not grow to accommodate its children)."> + +<style> +.masonry { display: masonry; position: relative; grid-template-columns: repeat(12, 1fr); height: 100px; width: 100px; } +.test { grid-column: 1 / span 8; background: red; } +.over { grid-column: 1 / span 8; width: 100%; background: green; position: absolute; } +.under { grid-column: 9 / span 4; background: green; } +.big-child { width: 500px; height: 100px; } +.masonry > div { + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="masonry"> + <div class="under"></div> + <div class="test"> + <div class=big-child></div> + </div> + <div class="over"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-spanning-items-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-spanning-items-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +#grid { + display: grid; + grid-template-columns: 1fr 30px; + border: 10px solid fuchsia; + width: min-content; +} +#item { + grid-column: 1 / span 2; +} +#filler { + width: 300px; + height: 50px; + background: aqua; +} +</style> +<div id="grid"> + <div id="item"> + <div id="filler"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-spanning-items.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-spanning-items.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic sizing with spanning flex items in a min-content container</title> +<link rel="match" href="column-flex-spanning-items-ref.html"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#intrinsic-sizes"/> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"/> +<style> +#masonry { + display: masonry; + grid-template-columns: 1fr 30px; + border: 10px solid fuchsia; + width: min-content; +} +#item { + grid-column: 1 / span 2; +} +#filler { + width: 300px; + height: 50px; + background: aqua; +} +</style> +<div id="masonry"> + <div id="item"> + <div id="filler"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-track-intrinsic-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-flex-track-intrinsic-sizes.html @@ -0,0 +1,202 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic contribution of an item with flex tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single masonry item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly."> +<style> +#masonry { + display: masonry; + width: 60px; + height: 60px; + border: solid; +} +#item { + background: blue; +} +#item::before { + content: ""; + display: block; + width: 100px; + height: 100px; +} +</style> + +<div id="log"></div> + +<div id="masonry"> + <div id="item"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +let testset = "unlabeled"; +function checkTrackSizes(span, trackList, expected) { + item.style.gridColumn = `span ${span}`; + TestingUtils.testGridTemplateColumns("masonry", trackList, expected, testset); +} + +// First check for distributing auto minimum /////////////////////////////////// +testset = "auto min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "0px 0px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "0px 0px 60px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "0px 0px"); +checkTrackSizes(2, "0fr auto", "0px 60px"); +checkTrackSizes(2, "0.5fr auto", "30px 30px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing min content ////////////////////////////////////// +item.style.minWidth = "min-content"; // min-content = 100px > grid +// TODO(almaher): Update to use "min-content" in the block axis for +// grid and masonry. +item.style.minHeight = "100px"; // min-content doesn't resolve in block axis (yet?) +testset = "min-content min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "50px 50px"); +checkTrackSizes(2, "0fr 1fr", "0px 100px"); +checkTrackSizes(2, "1fr 0fr", "100px 0px"); +checkTrackSizes(2, "1fr 1fr", "50px 50px"); +checkTrackSizes(2, "1fr 3fr", "25px 75px"); +checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 100px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "100px 0px"); +checkTrackSizes(2, "0fr auto", "100px 0px"); +checkTrackSizes(2, "0.5fr auto", "100px 0px"); +checkTrackSizes(2, "1fr auto", "100px 0px"); +checkTrackSizes(2, "1fr max-content", "100px 0px"); +checkTrackSizes(2, "1fr min-content", "100px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing fixed min //////////////////////////////////////// +item.style.minWidth = "50px"; // minimum < grid < min-content +item.style.minHeight = "50px"; // minimum < grid < min-content +testset = "50px min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "50px"); +checkTrackSizes(1, "1fr", "60px"); +checkTrackSizes(1, "2fr", "60px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "25px 25px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "25px 25px 50px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "50px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "50px 0px"); +checkTrackSizes(2, "0fr auto", "50px 10px"); +checkTrackSizes(2, "0.5fr auto", "50px 10px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums-ref.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<html> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.item { + font: 10px/1 Ahem; + background: cyan; + grid-column: 1 / -1; +} + +.abs { + width: 100%; + height: 5px; + position: absolute; +} + +.grid { + border: 2px solid black; + display: grid; + position: relative; + padding-top: 10px; + margin-bottom: 10px; + width: 100px; + justify-items: start; +} + +.float { + float: left; + width: 200px; +} + +.col1 { grid-column: 1 / 2; background: orange; } +.col2 { grid-column: 2 / 3; background: indigo; } +.col3 { grid-column: 3 / 4; background: green; } + +.gridMinContent { grid-template: 20px / minmax(0px, min-content) 5px; } +.gridMaxContent { grid-template: 20px / 5px minmax(0px, max-content); } +.gridMinMaxContent { grid-template: 20px / minmax(0px, min-content) 5% minmax(0px, max-content); } +.gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, min-content); } +.gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); } +</style> + +<div class="float"> + +<div class="grid gridMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMinContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid gridMinMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridMinMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridMinMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent" style="justify-items: start"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid gridFitContentAuto"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridFitContentAuto"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridFitContentAuto"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-maximums.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html> +<title>CSS Masonry: Masonry item intrinsic maximum sizes</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-intrinsic-maximums-ref.html"> +<style> +.masonry { + display: masonry; + border: 2px solid black; + position: relative; + padding-top: 10px; + margin-bottom: 10px; + width: 100px; + height: 20px; + justify-items: start; +} + +.item { + font: 10px/1 Ahem; + background: cyan; + grid-column: 1 / -1; + height: 20px; +} + +.abs { + width: 100%; + height: 5px; + position: absolute; +} + +.float { + float: left; + width: 200px; +} + +.col1 { grid-column: 1 / 2; background: orange; } +.col2 { grid-column: 2 / 3; background: indigo; } +.col3 { grid-column: 3 / 4; background: green; } + +.masonryMinContent { grid-template-columns: minmax(0px, min-content) 5px; } +.masonryMaxContent { grid-template-columns: 5px minmax(0px, max-content); } +.masonryMinMaxContent { grid-template-columns: minmax(0px, min-content) 5% minmax(0px, max-content); } +.masonryAutoMinContent { grid-template-columns: minmax(0px, auto) 5px minmax(0px, min-content); } +.masonryFitContentAuto { grid-template-columns: fit-content(100px) 5px minmax(0px, auto); } +</style> + +<div class="float"> + +<div class="masonry masonryMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="masonry masonryMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="masonry masonryMinContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="masonry masonryMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="masonry masonryMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="masonry masonryMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +</div> + +<div class="float"> + +<div class="masonry masonryMinMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryMinMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryMinMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryAutoMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryAutoMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryAutoMinContent" style="justify-items: start"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> + +<div class="float"> + +<div class="masonry masonryFitContentAuto"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryFitContentAuto"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="masonry masonryFitContentAuto"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes-min-size.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes-min-size.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Test that spanning masonry items with auto size that should not have content-based automatic minimum size.</title> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#intrinsic-sizes"/> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry{ + display: inline-masonry; + grid-template-columns: minmax(auto,0) minmax(auto,0); + background: red; + height: 100px; +} +.t{ + grid-column: 1 / span 2; + border-inline: 50px solid green; + height: 100px; + min-width: 0; +} +.inner{ + display: inline-block; + width: 100px; + height: 10px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="masonry"> + <div class="t"><div class="inner"></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-intrinsic-track-sizes.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single masonry item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#masonry { + display: masonry; + width: 120px; + height: 120px; + border: solid; + font: 10px/1 Ahem; +} +#item { + background: blue; + /* make min-content contribution differ from minimum contribution */ + min-width: 12px; + min-height: 12px; +} +</style> + +<div id="grid"> + <div id="item">XXX XX<br>XX<br>XX</div> +</div> + +<div id="log"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +function checkTrackSizes(span, trackList, expectedCols) { + item.style.gridColumn = `span ${span}`; + TestingUtils.testGridTemplateColumns("grid", trackList, expectedCols); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + // Item spanning a single track + checkTrackSizes(1, "auto", "120px"); + checkTrackSizes(1, "min-content", "30px"); + checkTrackSizes(1, "max-content", "60px"); + + checkTrackSizes(1, "minmax(0, auto)", "120px"); + checkTrackSizes(1, "minmax(0, min-content)", "30px"); + checkTrackSizes(1, "minmax(0, max-content)", "60px"); + + checkTrackSizes(1, "minmax(auto, 10px)", "12px"); + checkTrackSizes(1, "minmax(min-content, 10px)", "30px"); + checkTrackSizes(1, "minmax(max-content, 10px)", "60px"); + + // Item spanning two identical tracks + checkTrackSizes(2, "auto auto", "60px 60px"); + checkTrackSizes(2, "min-content min-content", "15px 15px"); + checkTrackSizes(2, "max-content max-content", "30px 30px"); + + checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px"); + checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px"); + checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "30px 30px"); + + checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px"); + checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px"); + checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px"); + checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "30px 30px"); + + // Item spanning a fixed track also + checkTrackSizes(2, "20px auto", "20px 100px"); + checkTrackSizes(2, "20px min-content", "20px 10px"); + checkTrackSizes(2, "20px max-content", "20px 40px"); + + checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px"); + checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px"); + checkTrackSizes(2, "20px minmax(0, max-content)", "20px 40px"); + + checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px"); + checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px"); + checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px"); + checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 40px"); + checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 40px"); + + // Item spanning two mismatched intrinsic tracks + checkTrackSizes(2, "max-content min-content", "45px 15px"); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Image within a masonry with a size that depends on the containing block should stretch, but not size the grid tracks</title> +<link rel="author" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<style> +#masonry { + display: inline-masonry; + grid-template-columns: minmax(auto, 0); + width: 200px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="masonry"> + <img id="img" src="support/100x100-green.png"> + <div style="background-color: red; aspect-ratio: 1;"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-002-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +.grid { + display: inline-grid; + grid-template-columns: minmax(auto, 0); + border: 5px solid goldenrod; +} +.spacer{ + height: 10px; +} +img { + border: 2px solid indigo; +} +.stretch { + align-self: stretch; + justify-self: stretch; +} +.start { + align-self: start; + justify-self: start; +} +</style> +<div class="grid"> + <img class="stretch" src="support/100x100-green.png"> +</div> +<div class="spacer"></div> +<div class="grid"> + <img class="start" src="support/100x100-green.png"> +</div> +\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-minmax-img-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test how images are stretched with different align/justify flags.</title> +<link rel="author" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items"> +<link rel="match" href="column-item-minmax-img-002-ref.html"> +<style> +.masonry { + display: inline-masonry; + grid-template-columns: minmax(auto, 0); + border: 5px solid goldenrod; +} +.spacer{ + height: 10px; +} +img { + border: 2px solid indigo; +} +.stretch { + align-self: stretch; + justify-self: stretch; +} +.start { + align-self: start; + justify-self: start; +} +</style> +<div class="masonry"> + <img class="stretch" src="support/100x100-green.png"> +</div> +<div class="spacer"></div> +<div class="masonry"> + <img class="start" src="support/100x100-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-001-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-001.html @@ -0,0 +1,317 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="column-item-percentage-sizes-001-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-002-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-002.html @@ -0,0 +1,317 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="column-item-percentage-sizes-002-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-003-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: calc(2px + 100%); + min-width: calc(2px + 100%); +} +.max { + max-height: calc(2px + 100%); + max-width: calc(2px + 100%); +} +.size { + height: calc(2px + 100%); + width: calc(2px + 100%); +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-item-percentage-sizes-003.html @@ -0,0 +1,317 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] calc() percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="column-item-percentage-sizes-003-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + height: 10px; + width: 10px; + grid-template-columns: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: calc(2px + 100%); + min-width: calc(2px + 100%); +} +.max { + max-height: calc(2px + 100%); + max-width: calc(2px + 100%); +} +.size { + height: calc(2px + 100%); + width: calc(2px + 100%); +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-baseline-shim-vertical-lr.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-baseline-shim-vertical-lr.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@almaher.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that masonry items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.masonry { + display: masonry; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + justify-items: baseline; +} +.item1, .item2 { + writing-mode: vertical-lr; +} +.item1 { + padding-left: 25px; + background: yellow; +} +.item2 { + padding-right: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: top; +} +.item2::before { + vertical-align: bottom; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 2; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 75px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 88px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="88" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".masonry"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-baseline-shim-vertical-rl.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-baseline-shim-vertical-rl.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that masonry items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.masonry { + display: masonry; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + justify-items: baseline; +} +.item1, .item2 { + writing-mode: vertical-rl; +} +.item1 { + padding-left: 25px; + background: yellow; +} +.item2 { + padding-right: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: top; +} +.item2::before { + vertical-align: bottom; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 2; + grid-row: 1 / 3; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div class="item1" data-offset-x="-25" data-offset-y="0"></div> + <div class="item2" data-offset-x="25" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 75px);"> + <div class="item1" data-offset-x="-25" data-offset-y="0"></div> + <div class="item2" data-offset-x="25" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 88px);"> + <div class="item1" data-offset-x="-12" data-offset-y="0"></div> + <div class="item2" data-offset-x="38" data-offset-y="50"></div> + <div class="area" data-expected-width="88" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-columns: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".masonry"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-with-percentages.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-contribution-with-percentages.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: minimum contribution with percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution"> +<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage."> +<style> +#masonry { + display: masonry; + height: 50px; + width: 50px; + grid-template-columns: auto; +} +#item { + background: cyan; +} +#content { + height: 100px; + width: 100px; +} +.min { + min-height: calc(100% + 50px); + min-width: calc(100% + 50px); +} +.max { + max-height: calc(100% - 50px); + max-width: calc(100% - 50px); +} +.size { + height: calc(100% + 10px); + width: calc(100% + 10px); +} +</style> +<div id="log"></div> +<div id="masonry"> + <div id="item"> + <div id="content"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +"use strict"; +const cs = getComputedStyle(document.getElementById("masonry")); +const item = document.getElementById("item"); +function check(name, size) { + item.className = name; + test(function() { + assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns"); + }, name + " - columns"); +} + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size is 'auto'. +check("auto", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size is 'auto'. +check("min", 50); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size is 'auto'. +check("max", 100); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size depends on the containing block. +check("size", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size is 'auto'. +check("min max", 50); + +// The minimum contribution is the minimum size (50px) +// because the preferred size depends on the containing block. +check("min size", 50); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size depends on the containing block. +check("max size", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size depends on the containing block. +check("min max size", 50); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Minimum size of grid items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed."> +<style> +#reference-overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-masonry { + display: masonry; + width: 10px; + height: 10px; + grid-template-columns: minmax(auto, 0px); +} + +#test-item-overlapping-red { + background-color: red; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-green"></div> +<div id="constrained-masonry"> + <div id="test-item-overlapping-red"> + <div id="content-100x100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-002.html @@ -0,0 +1,354 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Minimum size of items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.masonry { + display: masonry; + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; +} + +.masonry > div:nth-child(1) { + color: blue; + background: cyan; +} + +.masonry > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.masonry'); })"> + +<div id="log"></div> + +<pre>grid-template-columns: auto;</pre> + +<div class="masonry" style="grid-template-columns: auto;"> + <div data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="masonry" style="grid-template-columns: 0px;"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="masonry" style="grid-template-columns: 25px;"> + <div data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<h3>grid content writing-mode: vertical-lr;</h3> + +<pre>grid-template-columns: auto;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: 25px;"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>grid content writing-mode: vertical-rl;</h3> + +<pre>grid-template-columns: auto;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: 25px;"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/column-minimum-size-grid-items-003.html @@ -0,0 +1,359 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Minimum size of items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.masonry { + display: masonry; + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + grid-template-rows: 25px 25px; +} + +.masonry > div { + grid-column: span 2; +} + +.masonry > div:nth-child(1) { + color: blue; + background: cyan; +} + +.masonry > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.masonry'); })"> + +<div id="log"></div> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="masonry" style="grid-template-columns: auto auto;"> + <div data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="masonry" style="grid-template-columns: 0px 0px;"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="masonry" style="grid-template-columns: 20px 20px;"> + <div data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<h3>grid content writing-mode: vertical-lr;</h3> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: auto auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: 0px 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: 20px 20px;"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>grid content writing-mode: vertical-rl;</h3> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: auto auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: 0px 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: 20px 20px;"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-automatic-minimum-for-auto.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-automatic-minimum-for-auto.html @@ -0,0 +1,276 @@ +<!DOCTYPE html> +<title>CSS Masonry: automatic minimum in 'auto' rows</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"> +<meta name="assert" content="Check that masonry item's 'min-width' is honored when sizing 'auto' rows."> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.masonry { display: masonry; masonry-direction: row; font: 10px/1 Ahem; } + +.minHeight10 { min-height: 10px; } +.minHeight20 { min-height: 20px; } +.minHeight30 { min-height: 30px; } +.minHeight40 { min-height: 40px; } +.minHeight50 { min-height: 50px; } +.minHeight60 { min-height: 60px; } +.minHeight70 { min-height: 70px; } +.minHeight90 { min-height: 90px; } +.minHeightMaxContent { min-height: max-content; } + +.height30 { height: 30px; } +.height50 { height: 50px; } +.height60 { height: 60px; } +.height200 { height: 200px; } + +.border5 { border: 5px solid #abc; } +.padding8 { padding: 8px 0px; } + +/* All these 4 cases are equivalent. We use them interchangeably. */ +.gridAuto { grid-template-rows: auto; } +.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); } +.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); } +.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); } + +/* All these 3 cases are equivalent. We use them interchangeably. */ +.gridAutoAndAuto { grid-template-rows: auto auto; } +.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); } +.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div class="masonry gridAuto constrainedContainer" id="gridAuto"> + <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div> +</div> + +<div class="masonry gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize"> + <div class="firstRowFirstColumn minHeight40">XX</div> +</div> + +<div class="masonry gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto"> + <div class="firstRowFirstColumn minHeight40">XX<br>XX</div> +</div> + +<div class="masonry gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent"> + <div class="firstRowFirstColumn minHeight20 height30"></div> +</div> + +<div class="masonry gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto"> + <div class="firstRowFirstColumn minHeight60">X</div> +</div> + +<div class="masonry gridAuto constrainedContainer" id="gridAutoMultipleItems"> + <div class="firstRowFirstColumn minHeight60">X<br>X</div> + <div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div> + <div class="firstRowAutoColumn minConstrainedContainer height50"></div> +</div> + +<div class="masonry gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight"> + <div class="firstRowFirstColumn height30">X<br>X</div> + <div class="firstRowSecondColumn minHeight50"></div> + <div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div> +</div> + +<div class="masonry gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight"> + <div class="firstRowFirstColumn minHeight30">X<br>X</div> + <div class="firstRowSecondColumn height60">XX</div> + <div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren"> + <div class="firstRowFirstColumn height200"></div> + <div class="secondRowFirstColumn height50"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig"> + <div class="firstRowFirstColumn">XX XX</div> + <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning"> + <div class="bothRowSecondColumn minHeight60">XX XX XX</div> + <div class="firstRowFirstColumn">X X X X</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning"> + <div class="secondRowFirstColumn">X XXX XX</div> + <div class="bothRowSecondColumn minHeight70">XXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning"> + <div class="bothRowSecondColumn minHeight70">XX XX XX</div> + <div class="bothRowFirstColumn">XXXXX X XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContentAndAuto" + id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning"> + <div class="secondRowFirstColumn minHeight60">X XXX XX</div> + <div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridMinMaxAutoMaxContentAndAuto" + id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning"> + <div class="bothRowSecondColumn">XX XX XX XX</div> + <div class="firstRowFirstColumn minHeight40">XXX</div> + <div class="bothRowFirstColumn minHeight90">X XX XXX</div> + <div class="secondRowFirstColumn">X XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoWithFixedHeightChild"> + <div class="firstRowFirstColumn height60">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight"> + <div class="firstRowFirstColumn height60 minHeight40">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight"> + <div class="firstRowFirstColumn height60 minHeight90">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight"> + <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight"> + <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight"> + <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinHeightWithBorder"> + <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinHeightWithPadding"> + <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinHeightWithBorder"> + <div class="firstRowFirstColumn border5">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinHeightWithPadding"> + <div class="firstRowFirstColumn padding8">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinHeightWithBorder"> + <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinHeightWithPadding"> + <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="masonry gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div> + </div> +</div> + +<script> +function testGridRowsValues(id, computedRowValue) +{ + assert_equals(window.getComputedStyle(document.getElementById(id)) + .getPropertyValue('grid-template-rows'), computedRowValue); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + test(() => { + testGridRowsValues('gridAuto', '40px'); + testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px'); + testGridRowsValues('gridMinMaxAutoAuto', '40px'); + testGridRowsValues('gridMinMaxAutoMaxContent', '30px'); + testGridRowsValues('gridMinMaxMinContentAuto', '60px'); + testGridRowsValues('gridAutoMultipleItems', '60px'); + testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px'); + testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px'); + testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px'); + }, 'Check that min-height is honored when sizing auto rows.'); + test(() => { + testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px'); + testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px'); + testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px'); + testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px'); + testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px'); + testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px'); + }, 'Check that min-height is honored when sizing auto rows and spanning grid items.'); + test(() => { + testGridRowsValues('gridAutoWithFixedHeightChild', '60px'); + testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px'); + testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px'); + }, 'Check the interactions between height and min-height and auto tracks.'); + test(() => { + testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px'); + testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px'); + testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px'); + testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px'); + testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px'); + testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px'); + }, 'Check that borders and paddings are considering when computing min sizes.'); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-and-intrinsic-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-and-intrinsic-sizes.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>Auto Min Size is Zeroed When Spanning Flexible Tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="An item spanning >1 track, at least one of which is flexible, must have a zero automatic minimum size (and thus, not grow to accommodate its children)."> + +<style> +.masonry { display: masonry; masonry-direction: row; position: relative; grid-template-rows: repeat(12, 1fr); height: 100px; width: 100px; } +.test { grid-row: 1 / span 8; background: red; } +.over { grid-row: 1 / span 8; height: 100%; background: green; position: absolute; } +.under { grid-row: 9 / span 4; background: green; } +.big-child { height: 500px; width: 100px; } +.masonry > div { + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="masonry"> + <div class="under"></div> + <div class="test"> + <div class=big-child></div> + </div> + <div class="over"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-spanning-items-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-spanning-items-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +#grid { + display: grid; + grid-template-rows: 1fr 30px; + border: 10px solid fuchsia; + height: min-content; +} +#item { + grid-row: 1 / span 2; +} +#filler { + height: 300px; + width: 50px; + background: aqua; +} +</style> +<div id="grid"> + <div id="item"> + <div id="filler"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-spanning-items.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-spanning-items.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic sizing with spanning flex items in a min-content container</title> +<link rel="match" href="row-flex-spanning-items-ref.html"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#intrinsic-sizes"/> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"/> +<style> +#masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: 1fr 30px; + border: 10px solid fuchsia; + height: min-content; +} +#item { + grid-row: 1 / span 2; +} +#filler { + height: 300px; + width: 50px; + background: aqua; +} +</style> +<div id="masonry"> + <div id="item"> + <div id="filler"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-track-intrinsic-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-flex-track-intrinsic-sizes.html @@ -0,0 +1,201 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic contribution of an item with flex tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single masonry item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly."> +<style> +#masonry { + display: masonry; + masonry-direction: row; + width: 60px; + height: 60px; + border: solid; +} +#item { + background: blue; +} +#item::before { + content: ""; + display: block; + width: 100px; + height: 100px; +} +</style> + +<div id="log"></div> + +<div id="masonry"> + <div id="item"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +let testset = "unlabeled"; +function checkTrackSizes(span, trackList, expected) { + item.style.gridColumn = `span ${span}`; + TestingUtils.testGridTemplateRows("masonry", trackList, expected, testset); +} + +// First check for distributing auto minimum /////////////////////////////////// +testset = "auto min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "0px 0px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "0px 0px 60px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "0px 0px"); +checkTrackSizes(2, "0fr auto", "0px 60px"); +checkTrackSizes(2, "0.5fr auto", "30px 30px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing min content ////////////////////////////////////// +item.style.minWidth = "min-content"; // min-content = 100px > grid +item.style.minHeight = "100px"; // min-content doesn't resolve in block axis (yet?) +testset = "min-content min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "50px 50px"); +checkTrackSizes(2, "0fr 1fr", "0px 100px"); +checkTrackSizes(2, "1fr 0fr", "100px 0px"); +checkTrackSizes(2, "1fr 1fr", "50px 50px"); +checkTrackSizes(2, "1fr 3fr", "25px 75px"); +checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 100px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "100px 0px"); +checkTrackSizes(2, "0fr auto", "100px 0px"); +checkTrackSizes(2, "0.5fr auto", "100px 0px"); +checkTrackSizes(2, "1fr auto", "100px 0px"); +checkTrackSizes(2, "1fr max-content", "100px 0px"); +checkTrackSizes(2, "1fr min-content", "100px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing fixed min //////////////////////////////////////// +item.style.minWidth = "50px"; // minimum < grid < min-content +item.style.minHeight = "50px"; // minimum < grid < min-content +testset = "50px min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "50px"); +checkTrackSizes(1, "1fr", "60px"); +checkTrackSizes(1, "2fr", "60px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "25px 25px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "25px 25px 50px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "50px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "50px 0px"); +checkTrackSizes(2, "0fr auto", "50px 10px"); +checkTrackSizes(2, "0.5fr auto", "50px 10px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-intrinsic-track-sizes.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-intrinsic-track-sizes.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single masonry item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#masonry { + display: masonry; + masonry-direction: row; + width: 120px; + height: 120px; + border: solid; + font: 10px/1 Ahem; +} +#item { + background: blue; + /* make min-content contribution differ from minimum contribution */ + min-width: 12px; + min-height: 12px; +} +</style> + +<div id="grid"> + <div id="item">XXX XX<br>XX<br>XX</div> +</div> + +<div id="log"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +function checkTrackSizes(span, trackList, expectedRows) { + item.style.expectedRows = `span ${span}`; + TestingUtils.testGridTemplateRows("grid", trackList, expectedRows); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + // Item spanning a single track + checkTrackSizes(1, "auto", "120px"); + checkTrackSizes(1, "min-content", "40px"); + checkTrackSizes(1, "max-content", "60px", "30px"); + + checkTrackSizes(1, "minmax(0, auto)", "120px"); + checkTrackSizes(1, "minmax(0, min-content)", "40px"); + checkTrackSizes(1, "minmax(0, max-content)", "30px"); + + checkTrackSizes(1, "minmax(auto, 10px)", "12px"); + checkTrackSizes(1, "minmax(min-content, 10px)", "40px"); + checkTrackSizes(1, "minmax(max-content, 10px)", "30px"); + + // Item spanning two identical tracks + + checkTrackSizes(2, "auto auto", "60px 60px"); + checkTrackSizes(2, "min-content min-content", "20px 20px"); + checkTrackSizes(2, "max-content max-content", "15px 15px"); + + checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px"); + checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "20px 20px"); + checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "15px 15px"); + + checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px"); + checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px"); + checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "20px 20px"); + checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "15px 15px"); + + // Item spanning a fixed track also + checkTrackSizes(2, "20px auto", "20px 100px"); + checkTrackSizes(2, "20px min-content", "20px 20px"); + checkTrackSizes(2, "20px max-content", "20px 10px"); + + checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px"); + checkTrackSizes(2, "20px minmax(0, min-content)", "20px 20px"); + checkTrackSizes(2, "20px minmax(0, max-content)", "20px 10px"); + + checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px"); + checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 20px"); + checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px"); + checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 10px"); + checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 30px"); + + // Item spanning two mismatched intrinsic tracks + checkTrackSizes(2, "max-content min-content", "15px 15px"); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Image within a masonry with a size that depends on the containing block should stretch, but not size the grid tracks</title> +<link rel="author" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<style> +#masonry { + display: inline-masonry; + masonry-direction: row; + grid-template-rows: minmax(auto, 0); + height: 200px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="masonry"> + <img id="img" src="support/100x100-green.png"> + <div style="background-color: red; aspect-ratio: 1;"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-002-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +.grid { + display: inline-grid; + grid-template-rows: minmax(auto, 0); + border: 5px solid goldenrod; +} +.spacer{ + height: 10px; +} +img { + border: 2px solid indigo; +} +.stretch { + align-self: stretch; + justify-self: stretch; +} +.start { + align-self: start; + justify-self: start; +} +</style> +<div class="grid"> + <img class="stretch" src="support/100x100-green.png"> +</div> +<div class="spacer"></div> +<div class="grid"> + <img class="start" src="support/100x100-green.png"> +</div> +\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-minmax-img-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test how images are stretched with different align/justify flags.</title> +<link rel="author" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items"> +<link rel="match" href="row-item-minmax-img-002-ref.html"> +<style> +.masonry { + display: inline-masonry; + masonry-direction: row; + grid-template-rows: minmax(auto, 0); + border: 5px solid goldenrod; +} +.spacer{ + height: 10px; +} +img { + border: 2px solid indigo; +} +.stretch { + align-self: stretch; + justify-self: stretch; +} +.start { + align-self: start; + justify-self: start; +} +</style> +<div class="masonry"> + <img class="stretch" src="support/100x100-green.png"> +</div> +<div class="spacer"></div> +<div class="masonry"> + <img class="start" src="support/100x100-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-001-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-001.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="row-item-percentage-sizes-001-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + masonry-direction: row; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-002-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-002.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="row-item-percentage-sizes-002-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + masonry-direction: row; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-003-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: calc(2px + 100%); + min-width: calc(2px + 100%); +} +.max { + max-height: calc(2px + 100%); + max-width: calc(2px + 100%); +} +.size { + height: calc(2px + 100%); + width: calc(2px + 100%); +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-item-percentage-sizes-003.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: item [min-|max-]*[width|height] calc() percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="match" href="row-item-percentage-sizes-003-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: inline-masonry; + masonry-direction: row; + height: 10px; + width: 10px; + grid-template-rows: 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: calc(2px + 100%); + min-width: calc(2px + 100%); +} +.max { + max-height: calc(2px + 100%); + max-width: calc(2px + 100%); +} +.size { + height: calc(2px + 100%); + width: calc(2px + 100%); +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="masonry"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="masonry"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-contribution-baseline-shim.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-contribution-baseline-shim.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that masonry items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.masonry { + display: masonry; + masonry-direction: row; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + align-items: baseline; +} +.item1 { + padding-top: 25px; + background: yellow; +} +.item2 { + padding-bottom: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: bottom; +} +.item2::before { + vertical-align: top; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 3; + grid-row: 1 / 2; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="75"></div> +</div> + +<div class="masonry" style="grid-template-rows: minmax(auto, 75px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="75"></div> +</div> + +<div class="masonry" style="grid-template-rows: minmax(auto, 88px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="88"></div> +</div> + +<div class="masonry" style="grid-template-rows: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-rows: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="masonry" style="grid-template-rows: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".masonry"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-contribution-with-percentages.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-contribution-with-percentages.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: minimum contribution with percentages</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution"> +<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage."> +<style> +#masonry { + display: masonry; + masonry-direction: row; + height: 50px; + width: 50px; + grid-template-rows: auto; +} +#item { + background: cyan; +} +#content { + height: 100px; + width: 100px; +} +.min { + min-height: calc(100% + 50px); + min-width: calc(100% + 50px); +} +.max { + max-height: calc(100% - 50px); + max-width: calc(100% - 50px); +} +.size { + height: calc(100% + 10px); + width: calc(100% + 10px); +} +</style> +<div id="log"></div> +<div id="masonry"> + <div id="item"> + <div id="content"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +"use strict"; +const cs = getComputedStyle(document.getElementById("masonry")); +const item = document.getElementById("item"); +function check(name, size) { + item.className = name; + test(function() { + assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows"); + }, name + " - rows"); +} + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size is 'auto'. +check("auto", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size is 'auto'. +check("min", 50); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size is 'auto'. +check("max", 100); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size depends on the containing block. +check("size", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size is 'auto'. +check("min max", 50); + +// The minimum contribution is the minimum size (50px) +// because the preferred size depends on the containing block. +check("min size", 50); + +// The minimum contribution is the automatic minimum size (100px) +// because the preferred size depends on the containing block. +check("max size", 100); + +// The minimum contribution is the minimum size (50px) +// because the preferred size depends on the containing block. +check("min max size", 50); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed."> +<style> +#reference-overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-masonry { + display: masonry; + masonry-direction: row; + width: 10px; + height: 10px; + grid-template-rows: minmax(auto, 0px); +} + +#test-item-overlapping-red { + background-color: red; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-green"></div> +<div id="constrained-masonry"> + <div id="test-item-overlapping-red"> + <div id="content-100x100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-002.html @@ -0,0 +1,466 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Minimum size of items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.masonry { + display: masonry; + masonry-direction: row; + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + margin: 50px 0px; +} + +.masonry > div:nth-child(1) { + color: blue; + background: cyan; +} + +.masonry > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.masonry'); })"> + +<div id="log"></div> + +<h3>item writing-mode: vertical-lr;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="masonry" style="grid-template-rows: auto;"> + <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px;</pre> + +<div class="masonry" style="grid-template-rows: 0px;"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="masonry" style="grid-template-rows: 25px;"> + <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>item writing-mode: vertical-rl;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="masonry" style="grid-template-rows: auto;"> + <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px;</pre> + +<div class="masonry" style="grid-template-rows: 0px;"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="masonry" style="grid-template-rows: 25px;"> + <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>grid container writing-mode: vertical-lr; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: 25px;"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<h3>grid container writing-mode: vertical-rl; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: 25px;"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/row-minimum-size-grid-items-003.html @@ -0,0 +1,469 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masonry Layout Test: Minimum size of items</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes and spaning items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.masonry { + display: masonry; + masonry-direction: row; + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + margin: 50px 0px; +} + +.masonry > div { + grid-row: span 2; +} + +.masonry > div:nth-child(1) { + color: blue; + background: cyan; +} + +.masonry > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.masonry'); })"> + +<div id="log"></div> + +<h3>item writing-mode: vertical-lr;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="masonry" style="grid-template-rows: auto auto;"> + <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="masonry" style="grid-template-rows: 0px 0px;"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="masonry" style="grid-template-rows: 20px 20px;"> + <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>item writing-mode: vertical-rl;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="masonry" style="grid-template-rows: auto auto;"> + <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="masonry" style="grid-template-rows: 0px 0px;"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="masonry" style="grid-template-rows: 20px 20px;"> + <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="masonry" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>grid container writing-mode: vertical-lr; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: auto auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: 0px 0px;"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: 20px 20px;"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<h3>grid container writing-mode: vertical-rl; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: auto auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: 0px 0px;"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: 20px 20px;"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="masonry verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/items/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/masonry/tentative/items/support/100x100-green.png Binary files differ.
