зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1680174 [wpt PR 26712] - [css-flex] Port some mozilla tests to check-layout, a=testonly
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
This commit is contained in:
David Grogan
moz-wptsync-bot
Родитель
8f28da0c4b
Коммит
8306f2ab07
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal 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: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: auto; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
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="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. Additionally,
|
||||
the flex container derives its width from the "max-width" property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal 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 {
|
||||
max-width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: auto; /* height comes from contents */
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
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="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of row wrap-reverse flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a row wrap-reverse 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: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: auto; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
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="20" data-expected-height="10" data-offset-x="8" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="88"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="168"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="168"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="78"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="48"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="88"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="138"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="68"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="158"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="48"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="178"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="28"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="145"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="61"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="61"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="38"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="168"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="168"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="128"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!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. -->
|
||||
<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;
|
||||
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>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of column wrap-reverse flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a column wrap-reverse 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;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
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="20" data-offset-x="198" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="30"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="8" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="30"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="52"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="88" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="52"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="52"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="74"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="96"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="96"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="118"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="118"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="140"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="162"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="162"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="184"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="184"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="184"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="118" data-offset-y="228"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="88" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="228"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="138" data-offset-y="250"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="250"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="272"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="294"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="294"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="316"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="316"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="158" data-offset-y="360"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="360"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="178" data-offset-y="382"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="382"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="145" data-offset-y="426"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="61" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="61" data-offset-y="426"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="448"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="448"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@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;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto;
|
||||
height: 20px; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
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="20" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="30"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="98" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="30"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="52"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="58" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="58" data-offset-y="52"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="52"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="74"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="96"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="96"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="118"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="118"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="140"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="162"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="162"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="128" data-offset-y="184"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="184"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="184"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="88" data-offset-y="228"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="98" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="228"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="250"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="108" data-offset-y="250"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="272"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="294"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="294"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="316"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="316"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="48" data-offset-y="360"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="360"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="382"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="148" data-offset-y="382"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="61" data-offset-y="426"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="125" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="426"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="448"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="138" data-offset-y="448"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче