Bug 1630931 [wpt PR 23054] - [css-grid] Migrate grid-automatic-minimum-for-auto-rows to WPT, a=testonly
authorHenrique Ferreiro <hferreiro@igalia.com>
Tue, 28 Apr 2020 11:31:13 +0000
changeset 527513 9bbc6a4eacd6275ea4b5fff2df1701805da1f238
parent 527512 bf7866747811ef575c84819633298de776a57385
child 527514 4e35db1672e70e417207917f1e4c95a2cfb604c9
push id114723
push userarchaeopteryx@coole-files.de
push dateFri, 01 May 2020 14:54:07 +0000
treeherderautoland@8f743729a39b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1630931, 23054, 1063749, 767015, 2152791, 760445
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1630931 [wpt PR 23054] - [css-grid] Migrate grid-automatic-minimum-for-auto-rows to WPT, a=testonly Automatic update from web-platform-tests [css-grid] Migrate grid-automatic-minimum-for-auto-rows to WPT Migrate this test out of web_tests/fast/css-grid-layout/ and into the WPT-specific directory, adding links to the relevant specs and a test assertion describing its purpose. Bug: 1063749, 767015 Change-Id: Id3fe39a3ce2d81e8e378d55fc0b21bc74426670d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2152791 Commit-Queue: Henrique Ferreiro <hferreiro@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#760445} -- wpt-commits: 2d81266d7fb3ce5cecbd01a8d8539bdb6990e092 wpt-pr: 23054
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<title>CSS Grid: automatic minimum in 'auto' rows</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.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">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287">
+<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' rows.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+.grid { 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; }
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div class="grid gridAuto constrainedContainer" id="gridAuto">
+  <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
+</div>
+
+<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
+  <div class="firstRowFirstColumn minHeight40">XX</div>
+</div>
+
+<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
+  <div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
+</div>
+
+<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
+  <div class="firstRowFirstColumn minHeight20 height30"></div>
+</div>
+
+<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
+  <div class="firstRowFirstColumn minHeight60">X</div>
+</div>
+
+<div class="grid 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="grid 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="grid 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="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
+     <div class="firstRowFirstColumn height200"></div>
+     <div class="secondRowFirstColumn height50"></div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
+    <div class="firstRowFirstColumn">XX XX</div>
+    <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid 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="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
+    <div class="secondRowFirstColumn">X XXX XX</div>
+    <div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid 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="grid 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="grid 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="grid gridAuto" id="gridAutoWithFixedHeightChild">
+    <div class="firstRowFirstColumn height60">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
+    <div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
+    <div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
+    <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
+    <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
+    <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
+    <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
+    <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
+    <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
+    <div class="firstRowFirstColumn border5">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
+    <div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
+    <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
+    <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
+    <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid 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>