Bug 1646614 [wpt PR 24224] - [FlexNG] Multiplying by aspect ratio should ignore border/padding, a=testonly
authorDavid Grogan <dgrogan@chromium.org>
Mon, 22 Jun 2020 10:45:29 +0000
changeset 600943 2beded47c0dcc3ca69cdc16bfa970aa0c61cb8d3
parent 600942 45c811855f6b398eac193c225a86c221e7cc63af
child 600944 1e94519c3c73dc46f61080e6f93bcccbd3fc5ec1
push id13310
push userffxbld-merge
push dateMon, 29 Jun 2020 14:50:06 +0000
treeherdermozilla-beta@15a59a0afa5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1646614, 24224, 1094311, 2251202, 780401
milestone79.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 1646614 [wpt PR 24224] - [FlexNG] Multiplying by aspect ratio should ignore border/padding, a=testonly Automatic update from web-platform-tests [FlexNG] Multiplying by aspect ratio should ignore border/padding Only the content box should be multiplied by the aspect ratio to derive the size of a side given the other side and the aspect ratio. So, subtract the border/padding from the side you have, then multiply to get the content size, then add that side's border/padding. Bug: 1094311 Change-Id: Ib69a224cdb369c3fa46f5d432af73eb131781673 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2251202 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#780401} -- wpt-commits: ee0367139c6b8c56d7ce9b0b182a28cd43de4d66 wpt-pr: 24224
testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-005.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-005.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<title>Aspect-ratio items with borders</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion">
+<meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+img {
+  border-top: 50px solid blue;
+  border-left: 10px solid orange;
+}
+
+.flexbox {
+  display: flex;
+  margin-bottom: 20px;
+}
+</style>
+
+<!-- script after body was flakily triggering before images were loaded, so wait for onload -->
+<body onload="checkLayout('img')">
+
+<p>
+The green boxes should all be 100x100.
+</p>
+
+Section B of flex base size + transferred size suggestion:
+<div class=flexbox>
+  <img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+Section B of flex base size + transferred size suggestion, with box-sizing: border-box:
+<!-- Chrome 83 fails the border-box version. -->
+<div class=flexbox>
+  <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+content size suggestion
+<div class=flexbox>
+  <img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+content size suggestion
+<div class=flexbox>
+  <img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+</body>