Bug 1630538 [wpt PR 22992] - [css-grid] Migrate flex-sizing-columns-min-max-width.html to WPT, a=testonly
authorGyuyoung Kim <gyuyoung@igalia.com>
Wed, 22 Apr 2020 04:14:57 +0000
changeset 525856 be94aabb19f7123b310657b8c93b1c1ec907e227
parent 525855 f85aae375ef4f685a30a391d77c7f8803194f1ca
child 525857 34a6feb6dd693f8ed9f87bfa2c1f5f69704d04b0
push id37348
push userrmaries@mozilla.com
push dateSat, 25 Apr 2020 09:49:23 +0000
treeherdermozilla-central@d8a8178627c4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1630538, 22992, 1063749, 2152127, 759638
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 1630538 [wpt PR 22992] - [css-grid] Migrate flex-sizing-columns-min-max-width.html to WPT, a=testonly Automatic update from web-platform-tests [css-grid] Migrate flex-sizing-columns-min-max-width.html to WPT This CL migrates flex-sizing-columns-min-max-width.html from fast/css-grid-layout to external/wpt/css/css-grid/grid-definition with WPT styles, adding links to the relevant specs, and test description. Additionally, this test is renamed to flex-sizing-columns-min-max-width-001.html to be align with existing tests. Bug: 1063749 Change-Id: Ia88b67bd6ace8b2901990da9da26e5643a2ceaf3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2152127 Commit-Queue: Gyuyoung Kim <gyuyoung@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#759638} -- wpt-commits: 34291e336bfada7b03fb04b51e960c9641ea76f5 wpt-pr: 22992
testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<title>CSS Grid Layout Test: min and max size when computing the flex fraction</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that minimum and maximum sizes are used to compute the flex fraction for indefinite free spaces."/>
+<style>
+.grid {
+   margin: 3px;
+   grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
+   grid-column-gap: 33px;
+   border: 5px dashed;
+   padding: 2px;
+}
+
+.float { float: left; }
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test PASS if all the grids in the same row look the same.</p>
+
+<div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+<div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+<div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+<div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+<div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+<div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+<div class="grid float max-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+
+<br clear="all">
+
+<div class="float min-content">
+    <div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+<div class="float max-content">
+    <div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+<div class="float fit-content">
+    <div class="grid max-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+
+</body>