mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-18 15:55:36 +00:00
Bug 1716650 [wpt PR 29391] - [css-flex] Migrate more abspos tests from reference to check-layout, a=testonly
Automatic update from web-platform-tests [css-flex] Migrate more abspos tests from reference to check-layout Before this patch, the entire test file is marked Fail even though each file has ~15-20 tests in it, some of which Blink passes. If we were to regress any of the tests we pass, we'd never know. This patch shows that Blink disagrees with Firefox in any wrap-reverse container and some justify-content:space-between containers. Change-Id: I3ce1120a47f85a89ecfbea9952b15514bc1c58e4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2965267 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Auto-Submit: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#892738} -- wpt-commits: 38ba3d82c68c3f79d9a24350ff1960a493c65d5c wpt-pr: 29391
This commit is contained in:
David Grogan
moz-wptsync-bot
parent
485dd2ce25
commit
63835bc0a1
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-002-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-003-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-004-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-005-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-006-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-007-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-008-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
@ -39,54 +40,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-rtl-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
@ -40,54 +41,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-rtl-002-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
@ -40,54 +41,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
@ -40,54 +41,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,12 +7,13 @@
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-002-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
@ -40,54 +41,57 @@
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="justify-content: normal"><div></div></div>
|
||||
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div></div></div>
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div></div></div>
|
||||
<div class="container" style="justify-content: start"><div></div></div>
|
||||
<div class="container" style="justify-content: end"><div></div></div>
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="justify-content: flex-start"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div></div></div>
|
||||
<div class="container" style="justify-content: left"><div></div></div>
|
||||
<div class="container" style="justify-content: right"><div></div></div>
|
||||
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user