forked from mirrors/gecko-dev
29ca1d3d51
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-align-content* have ~70 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. Change-Id: If82f455a22745898b0acf59c0f7cd20b525951cb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2568816 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#832876} -- wpt-commits: 3b3569632df0fcfc2313d8618c99fd65cae848fa wpt-pr: 26712
183 lines
12 KiB
HTML
183 lines
12 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
|
|
testing each possible value of the 'align-content' property. Additionally,
|
|
the flex container derives its height from the "max-height" property.-->
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>CSS Test: Testing 'align-content' in a vertical flex container</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="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
|
<style>
|
|
div.flexbox {
|
|
width: 200px;
|
|
max-height: 10px; /* Short, to force us to wrap */
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2px;
|
|
background: lightgray;
|
|
}
|
|
div.a {
|
|
width: 10px;
|
|
height: 10px;
|
|
flex: none;
|
|
background: lightgreen;
|
|
}
|
|
div.b {
|
|
width: auto; /* width comes from contents */
|
|
height: 10px;
|
|
flex: none;
|
|
background: pink;
|
|
}
|
|
div.c {
|
|
width: 40px;
|
|
height: 10px;
|
|
flex: none;
|
|
background: orange;
|
|
}
|
|
|
|
/* Inside of 'b': */
|
|
div.fixedSizeChild {
|
|
width: 30px;
|
|
height: 5px;
|
|
background: purple;
|
|
}
|
|
</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 div')">
|
|
|
|
<!-- default (stretch) -->
|
|
<div class="flexbox">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div>
|
|
<div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div>
|
|
<div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div>
|
|
</div>
|
|
|
|
<!-- flex-start -->
|
|
<div class="flexbox" style="align-content: flex-start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: flex-start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: flex-start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div>
|
|
</div>
|
|
|
|
<!-- flex-end -->
|
|
<div class="flexbox" style="align-content: flex-end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: flex-end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: flex-end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div>
|
|
</div>
|
|
|
|
<!-- center -->
|
|
<div class="flexbox" style="align-content: center">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: center">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: center">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div>
|
|
</div>
|
|
|
|
<!-- space-between -->
|
|
<div class="flexbox" style="align-content: space-between">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-between">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-between">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div>
|
|
</div>
|
|
|
|
<!-- space-around -->
|
|
<div class="flexbox" style="align-content: space-around">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-around">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-around">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div>
|
|
</div>
|
|
|
|
<!-- space-evenly -->
|
|
<div class="flexbox" style="align-content: space-evenly">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-evenly">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: space-evenly">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div>
|
|
</div>
|
|
|
|
<!-- start -->
|
|
<div class="flexbox" style="align-content: start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: start">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div>
|
|
</div>
|
|
|
|
<!-- end -->
|
|
<div class="flexbox" style="align-content: end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div>
|
|
</div>
|
|
<div class="flexbox" style="align-content: end">
|
|
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div>
|
|
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div>
|
|
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|