Bug 1523562 [wpt PR 15008] - [Layout] Fix height: <percent> size of flexbox children, a=testonly
authorAleks Totic <atotic@chromium.org>
Thu, 31 Jan 2019 18:59:41 +0000
changeset 458097 bdef78cbd41a17b0dd3a30a42fc11d28d870149c
parent 458096 03ba40e6e339f84f84f5ffde2ab3012e699a78a4
child 458098 e277ba0e12c4903174a5014d0c5ed4ecc6607008
push id35518
push useropoprus@mozilla.com
push dateFri, 08 Feb 2019 09:55:14 +0000
treeherdermozilla-central@3a3e393396f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1523562, 15008, 907911, 1428579, 625214
milestone67.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 1523562 [wpt PR 15008] - [Layout] Fix height: <percent> size of flexbox children, a=testonly Automatic update from web-platform-tests [Layout] Fix height: <percent> size of flexbox children height: <percent> sizes of flexbox could be incorrect after flexbox resize. Bug: 907911 Change-Id: I19616f7f9cda7cd55a7206b3bb379f4957fccd4c Reviewed-on: https://chromium-review.googlesource.com/c/1428579 Commit-Queue: Aleks Totic <atotic@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#625214} -- wpt-commits: 60d89ca2400fb116d0a63d4efb3bdddacb7ff571 wpt-pr: 15008
testing/web-platform/tests/css/css-sizing/percentage-height-in-flexbox.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/percentage-height-in-flexbox.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>Percentage height in flexbox: css-sizing-3</title>
+<link rel="author" title="mailto:atotic@google.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">
+<link rel="help" href="https://crbug.com/907911">
+<meta name="assert" content="Percentage height resolves correctly inside flexbox.">
+<style>
+#outer {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+#container {
+  display: inline-flex;
+  height: 50px;
+  background: green;
+}
+#target {
+  height:100%;
+  display:block;
+}
+</style>
+<div id="outer">
+  <div id="container">
+    <img id="target" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
+  </div>
+</div>
+<script>
+test(() => {
+  let target = document.querySelector("#target");
+  assert_equals(target.offsetWidth, target.offsetHeight);
+  assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
+  assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
+}, '#target offsetSize matches #container offsetSize' );
+test(() => {
+  document.querySelector("#container").style.height = "100px";
+  let target = document.querySelector("#target");
+  assert_equals(target.offsetWidth, target.offsetHeight);
+  assert_equals(target.offsetWidth, target.parentNode.offsetWidth);
+  assert_equals(target.offsetHeight, target.parentNode.offsetHeight);
+}, '#target offsetSize matches #container offsetSize after resize' );
+
+</script>