forked from mirrors/gecko-dev
1bc987d8b5
Automatic update from web-platform-tests [css-flex] Port some mozilla tests to check-layout These files, from external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-00*, have ~20 test cases each. Chrome fails some of them but not others. With check-layout we can use -expected.txt files to prevent regressions for the cases that we pass. With the current ref tests, we have to disable an entire file if we fail even one case in it. No expectations were changed in the porting. You can see exactly which lines changed at [1], because it doesn't rename the files. [1] https://chromium-review.googlesource.com/c/chromium/src/+/2387420 Change-Id: I6fa59df56599c15cccddba4c77afcad6668b9f3e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2387148 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#806718} -- wpt-commits: 0333bca513bf888f8412d941ac2a352906d295f3 wpt-pr: 25313
135 lines
5.4 KiB
HTML
135 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
influence sizing on non-stretched flex item w/ intrinsic ratio,
|
|
some padding, and box-sizing:border-box.
|
|
</title>
|
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
<style>
|
|
.flexbox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid black;
|
|
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
|
|
float: left; /* For testing in "rows" */
|
|
}
|
|
img {
|
|
padding: 1px 2px 3px 4px;
|
|
box-sizing: border-box;
|
|
background: pink;
|
|
}
|
|
|
|
br { clear: both; }
|
|
|
|
.flexbox > * {
|
|
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
later channels of influence. */
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
</head>
|
|
<body onload="checkLayout('.flexbox > img')">
|
|
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
|
|
<!-- Row 1: no special sizing: -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" data-expected-width="22" data-expected-height="20">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
min-height: 34px" data-expected-width="36" data-expected-height="34">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 34px;
|
|
min-height: 30px" data-expected-width="34" data-expected-height="32">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 20px;
|
|
max-height: 14px" data-expected-width="16" data-expected-height="14">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 14px;
|
|
max-height: 20px" data-expected-width="14" data-expected-height="12">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
max-height: 10px" data-expected-width="30" data-expected-height="10">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px;
|
|
min-height: 30px" data-expected-width="10" data-expected-height="30">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
height: 10px" data-expected-width="30" data-expected-height="10">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 30px;
|
|
max-height: 10px" data-expected-width="30" data-expected-height="10">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px;
|
|
height: 30px" data-expected-width="10" data-expected-height="30">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 10px;
|
|
min-height: 30px" data-expected-width="10" data-expected-height="30">
|
|
</div>
|
|
</body>
|
|
</html>
|