Part 5: Implement the intrinsic size contribution for fit-content().

We simplified to just rely on the behavior of the plain argument. That is, width: fit-content(50%) behaves the same as width: 50%; in all circumstances, just clamped by min/max-content. Note: for block axis, we treat fit-content() as initial value its minimal and maximal value are identical and equal to the initial value in block axis. From: w3c/csswg-drafts#3731 (comment) Note: this patch doesn't include any update on flex and grid layout. We may have to come back to check it. Differential Revision: https://phabricator.services.mozilla.com/D113199 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1312588 gecko-commit: 41792e6152e6b5e8ad472e6cc21ce07352447bb8 gecko-reviewers: TYLin, emilio
web-platform-tests · Jun 8, 2021 · 1459a71 · 1459a71
1 parent a361908
commit 1459a71
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 0 deletions.
diff --git a/css/css-sizing/fit-content-length-percentage-011.html b/css/css-sizing/fit-content-length-percentage-011.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): min-content contribution</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat width as the
+  initial value (i.e. auto) for min content contribution -->
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: fit-content(50%);">
+    <div style="display: inline-block; width: 100px;"></div>
+    <div style="display: inline-block; width: 100px;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/fit-content-length-percentage-012.html b/css/css-sizing/fit-content-length-percentage-012.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): min-content contribution for min-size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: 50px; min-width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0
+  for min content contribution. However, fit-content() should be clamped by
+  min-content size and max-content size, so the result min-width is equal to
+  min-content size here -->
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: 50px; min-width: fit-content(50%);">
+    <div style="display: inline-block; width: 100px;"></div>
+    <div style="display: inline-block; width: 100px;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/fit-content-length-percentage-013.html b/css/css-sizing/fit-content-length-percentage-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): min-content contribution for max-size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: 200px; max-width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the
+  initial value for min content contribution. The initial value is None and
+  fit-content() should be clamped by min-content size and max-content size, so
+  the result max-width is equal to max-content size here -->
+<div style="width: min-content; height: 50px; background: green;">
+  <div style="width: 200px; max-width: fit-content(50%); font-size: 0;">
+    <div style="display: inline-block; width: 50px;"></div>
+    <div style="display: inline-block; width: 50px;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/fit-content-length-percentage-014.html b/css/css-sizing/fit-content-length-percentage-014.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): max-content contribution</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat width as the
+  initial value (i.e. auto) for max content contribution -->
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: fit-content(50%); font-size: 0;">
+    <div style="display: inline-block; width: 50px;"></div>
+    <div style="display: inline-block; width: 50px;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/fit-content-length-percentage-015.html b/css/css-sizing/fit-content-length-percentage-015.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): max-content contribution for min-size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: 50px; min-width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0
+  for max content contribution. However, fit-content() should be clamped by
+  min-content size and max-content size, so the result min-width is equal to
+  min-content size here -->
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: 50px; min-width: fit-content(50%);">
+    <div style="display: inline-block; width: 100px;"></div>
+    <div style="display: inline-block; width: 100px;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/fit-content-length-percentage-016.html b/css/css-sizing/fit-content-length-percentage-016.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS fit-content(): max-content contribution for max-size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: 200px; max-width: fit-content(100px);">
+    <div style="display: inline-block; width: 60px;"></div>
+    <div style="display: inline-block; width: 60px;"></div>
+  </div>
+</div>
+
+<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the
+  initial value for max content contribution. The initial value is None and
+  fit-content() should be clamped by min-content size and max-content size, so
+  the result max-width is equal to max-content size here -->
+<div style="width: max-content; height: 50px; background: green;">
+  <div style="width: 200px; max-width: fit-content(50%); font-size: 0;">
+    <div style="display: inline-block; width: 50px;"></div>
+    <div style="display: inline-block; width: 50px;"></div>
+  </div>
+</div>