Bug 1632238 [wpt PR 23178] - [FlexNG] Add test for replaced %-block-size descendant., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Tue, 28 Apr 2020 11:38:10 +0000
changeset 527582 2452c37111886680e246b04e30d0055d011e240c
parent 527581 c5443e2f9b7ce635d6dbac63e58486cf27a46609
child 527583 e3fce10d86ae39772ccfa831e0fd0d726e2165f3
push id37368
push userbtara@mozilla.com
push dateFri, 01 May 2020 21:45:51 +0000
treeherdermozilla-central@0f9c5a59e45d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1632238, 23178, 845235
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 1632238 [wpt PR 23178] - [FlexNG] Add test for replaced %-block-size descendant., a=testonly Automatic update from web-platform-tests [FlexNG] Add test for replaced %-block-size descendant. With FlexNG we now cache on the ComputeMinMaxSizes level. This fixes a subtle dynamic edge case. Previously (legacy) wouldn't invalidate the flex-item base size due to a parent height changes. This adds a test for this case. Bug: 845235 Change-Id: Ic711c3f8110b08fcc89351274a7bd283f66c1ce1 -- wpt-commits: 9eb7edb448e51c8c3e024608484290f19f374415 wpt-pr: 23178
testing/web-platform/tests/css/css-flexbox/percentage-heights-014.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-014.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="A flex-item with a replaced height descendant should determine its flex-basis correctly when the height of the flexbox changes." />
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="display: flex; width: 100px; height: 100px;">
+  <div style="height: 50%; flex: 1; background: green;">
+    <canvas width=10 height=10 style="height: 100%;"></canvas>
+  </div>
+  <div style="flex: 1;"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  document.getElementById('target').style.height = '200px';
+</script>