Skip to content

Commit

Permalink
[wpt] Add tests for aspect-ratio + intrinsic-size calculation.
Browse files Browse the repository at this point in the history 
As above. This adds a series of tests for when we have an element with
an aspect-ratio (via. the aspect-ratio property, or by being a replaced
element of some form.

These tests either test stretching in the block-axis (via.
"align-self: stretch" for example) or by explicity setting the height as
"height: 100%;".

When an element has a block-constraint like this, it should try and
resolve it if possible, then transfer this size in into the inline
direction for the min/max content size.

See: https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes

"Note: When the box has a preferred aspect ratio, size constraints in
 the opposite dimension will transfer through and can affect the auto
 size in the considered one. See CSS2§10."

For example:
<div style="display: flex; width: min-content; height: 100px;">
  <div style="aspect-ratio: 1/1;"></div>
</div>

Here the flexbox ends up being 100x100 as the element with the
aspect-ratio transfers its stretched height (100px) to its width.

Change-Id: I378bb60581b86b397f92eefce5084244bf0b73a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2774294
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/master@{#864832}
  • Loading branch information
@bfgeek @chromium-wpt-export-bot
bfgeek authored and chromium-wpt-export-bot committed Mar 19, 2021
1 parent 2b5ad7f commit fc109c5
Show file tree
Hide file tree
Showing 13 changed files with 122 additions and 0 deletions.
10 changes: 10 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-001.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-flex; height: 100px; background: green;">
<div>
<canvas width=10 height=10 style="height: 100%;"></canvas>
</div>
</div>
14 changes: 14 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="display: inline-flex; height: 50px; background: green;">
<div>
<canvas width=10 height=10 style="height: 100%;"></canvas>
</div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>
8 changes: 8 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-003.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-flex; height: 100px; background: green;">
<div style="aspect-ratio: 1/1;"></div>
</div>
12 changes: 12 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-004.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="display: inline-flex; height: 50px; background: green;">
<div style="aspect-ratio: 1/1;"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>
14 changes: 14 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-005.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="height: 50px; width: min-content; background: green;">
<div style="display: flex; height: 100%; background: green;">
<div style="aspect-ratio: 1/1;"></div>
</div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>
8 changes: 8 additions & 0 deletions css/css-flexbox/aspect-ratio-intrinsic-size-006.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment.">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-flex; height: 100px; background: green;">
<img src="support/60x60-green.png" style="align-self: stretch; opacity: 0" />
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/aspect-ratio-001.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
<div style="aspect-ratio: 1/1; height: 100%;"></div>
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/aspect-ratio-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;">
<div style="aspect-ratio: 1/1; height: 100%; grid-row-start: 1; grid-row-end: 3;"></div>
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/aspect-ratio-003.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
<div style="aspect-ratio: 2/1; height: 50%;"></div>
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/aspect-ratio-004.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="An element with an aspect-ratio and stretch alignment stretches to the definite row, and transfers its size.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
<img src="support/50x50-green.png" style="align-self: stretch; opacity: 0;">
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/replaced-element-011.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
<canvas width=10 height=10 style="height: 100%;"></canvas>
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/replaced-element-012.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;">
<canvas width=10 height=10 style="height: 100%; grid-row-start: 1; grid-row-end: 3;"></canvas>
</div>
8 changes: 8 additions & 0 deletions css/css-grid/grid-items/replaced-element-013.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
<canvas width=20 height=10 style="height: 50%;"></canvas>
</div>

0 comments on commit fc109c5

Please sign in to comment.