mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-10 10:09:14 +00:00
Tests: Import a bunch of WPT tests from /css/css-flexbox
This commit is contained in:
Andreas Kling
Andreas Kling
parent
0ebdac0b35
commit
abd24d001d
Notes:
github-actions[bot]
2024-10-30 09:18:21 +00:00
Author: https://github.com/awesomekling
Commit: abd24d001d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2039
688 changed files with 27834 additions and 0 deletions
|
|
@ -0,0 +1,8 @@
|
|||
spec: https://drafts.csswg.org/css-flexbox/
|
||||
suggested_reviewers:
|
||||
- kojiishi
|
||||
- plinss
|
||||
- cbiesinger
|
||||
- fantasai
|
||||
- rachelandrew
|
||||
- tabatkins
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
features:
|
||||
- name: flexbox
|
||||
files: "**"
|
||||
# TODO: map *gap* to flexbox-gap. This is currently not possible without the
|
||||
# tests being associated with both flexbox and flexbox-gap. All but one of the
|
||||
# *gap* tests are passing in all browsers, so lumping them in with flexbox is
|
||||
# relatively harmless.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: removing abspos descendents</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=167566">
|
||||
<meta name="assert" content="This test ensures that flex item's padding doesn't disappear when an abspos descendent is removed.">
|
||||
<link href="../support/flexbox.css" rel="stylesheet">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementById('to-hide').style.display = "none";
|
||||
checkLayout(".flexbox");
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div class="flexbox" style="height: 100px;" data-expected-height="100">
|
||||
<div style="width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;" data-expected-height="100">
|
||||
<div style="position: relative; height: 100px; background-color: green;" data-expected-height="100">
|
||||
<div id="to-hide" style="position: absolute;" data-expected-height="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-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="help" href="https://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row wrap;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" is actually the only alignment that matters here.
|
||||
The flex containers' various "align-content" values have no impact on
|
||||
the positioning of absolutely-positioned flex children. */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y=""></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
align-items: center; /* To exercise 'align-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" 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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 onload="checkLayout('.container > div')">
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
|
||||
<div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row wrap-reverse;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></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 data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></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 data-offset-x="2" data-offset-y="5"></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="2" data-offset-y="5"></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 data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></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 data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></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 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="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse wrap;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></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 data-offset-x="10" data-offset-y="5"></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="5"></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 data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></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 data-offset-x="0" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></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 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="-3"></div></div>
|
||||
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column wrap-reverse;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse wrap;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="2" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></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 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 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 data-offset-x="2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></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="5"></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<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 data-offset-x="10" data-offset-y="5"></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="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 data-offset-x="-2" data-offset-y="-3"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<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">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
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 > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
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 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 data-offset-x="10" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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 data-offset-x="-2" data-offset-y="1"></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<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 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 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,709 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Checks that we correctly position abspos children
|
||||
in a number of writing modes and alignments">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
}
|
||||
.flexbox div {
|
||||
border: 0;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.horizontal-tb {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-flow: row;
|
||||
}
|
||||
.row-reverse {
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
.column {
|
||||
flex-flow: column;
|
||||
}
|
||||
.column-reverse {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: blue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.justify-content-flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-content-flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-content-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-content-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
<script>
|
||||
// Each flexbox has two abspos children - one is 40x10, the other 10x20.
|
||||
// The flexbox itself is 80x20.
|
||||
// All that is flipped for vertical flows.
|
||||
var expectations = {
|
||||
'horizontal-tb': {
|
||||
'row': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
'row-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'vertical-rl': {
|
||||
'row': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
'row-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [10, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [10, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [10, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'vertical-lr': {
|
||||
'row': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
'row-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 40],
|
||||
'child2': [0, 70],
|
||||
},
|
||||
'center': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [0, 20],
|
||||
'child2': [0, 35],
|
||||
},
|
||||
},
|
||||
},
|
||||
'column-reverse': {
|
||||
'ltr': {
|
||||
'flex-start': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 0],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 0],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 0],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
'rtl': {
|
||||
'flex-start': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'flex-end': {
|
||||
'child1': [0, 10],
|
||||
'child2': [0, 0],
|
||||
},
|
||||
'center': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
'space-between': {
|
||||
'child1': [40, 10],
|
||||
'child2': [70, 0],
|
||||
},
|
||||
'space-around': {
|
||||
'child1': [20, 10],
|
||||
'child2': [35, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
|
||||
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
|
||||
var directions = ['ltr', 'rtl'];
|
||||
var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
|
||||
|
||||
function mainAxisDirection(writingMode, flexDirection)
|
||||
{
|
||||
if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
|
||||
|| (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
|
||||
return 'width';
|
||||
return 'height';
|
||||
}
|
||||
|
||||
function addChild(flexbox, mainAxis, crossAxis, mainAxisLength, crossAxisLength, expectations)
|
||||
{
|
||||
var child = document.createElement('div');
|
||||
child.setAttribute('style', mainAxis + ': ' + mainAxisLength + 'px;'
|
||||
+ crossAxis + ': ' + crossAxisLength + 'px; position: absolute;');
|
||||
|
||||
child.setAttribute("data-expected-" + mainAxis, mainAxisLength);
|
||||
child.setAttribute("data-expected-" + crossAxis, crossAxisLength);
|
||||
child.setAttribute("data-offset-x", expectations[0]);
|
||||
child.setAttribute("data-offset-y", expectations[1]);
|
||||
|
||||
flexbox.appendChild(child);
|
||||
}
|
||||
|
||||
writingModes.forEach(function(writingMode) {
|
||||
flexDirections.forEach(function(flexDirection) {
|
||||
directions.forEach(function(direction) {
|
||||
justifyContents.forEach(function(justifyContent) {
|
||||
var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent;
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerHTML = flexboxClassName;
|
||||
document.body.appendChild(title);
|
||||
|
||||
var mainAxis = mainAxisDirection(writingMode, flexDirection);
|
||||
var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
|
||||
|
||||
var flexbox = document.createElement('div');
|
||||
flexbox.className = 'flexbox ' + flexboxClassName;
|
||||
flexbox.setAttribute('style', mainAxis + ': 80px;' + crossAxis + ': 20px');
|
||||
|
||||
var baselineMargin = (flexDirection.indexOf('row') != -1) ? 'margin-block-start: 5px' : 'margin-inline-start: 5px';
|
||||
|
||||
var testExpectations = expectations[writingMode][flexDirection][direction][justifyContent];
|
||||
addChild(flexbox, mainAxis, crossAxis, 40, 10, testExpectations['child1']);
|
||||
addChild(flexbox, mainAxis, crossAxis, 10, 20, testExpectations['child2']);
|
||||
|
||||
document.body.appendChild(flexbox);
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link href="../support/flexbox.css" rel="stylesheet">
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Checks that we correctly position abspos children
|
||||
with different alignments and dynamic changes">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.flexbox {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.flexbox > * {
|
||||
flex: none;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.flexbox > div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
#placed-absolute {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: blue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: yellow;
|
||||
}
|
||||
.flexbox :nth-child(3) {
|
||||
background-color: salmon;
|
||||
}
|
||||
.flexbox :nth-child(4) {
|
||||
background-color: grey;
|
||||
}
|
||||
.flexbox :nth-child(5) {
|
||||
background-color: red;
|
||||
}
|
||||
.flexbox :nth-child(6) {
|
||||
background-color: orange;
|
||||
}
|
||||
.flexbox :nth-child(7) {
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class='flexbox relative align-items-center'>
|
||||
<div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div>
|
||||
</div>
|
||||
|
||||
<div class='flexbox relative align-items-center'>
|
||||
<div data-offset-x=0 data-offset-y=40></div>
|
||||
<div class='absolute' data-offset-x=0 data-offset-y=40></div>
|
||||
<div data-offset-x=20 data-offset-y=40></div>
|
||||
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class='flexbox align-items-center'>
|
||||
<div data-offset-x=10 data-offset-y=40></div>
|
||||
<div class='absolute' data-offset-x=10 data-offset-y=40></div>
|
||||
<div data-offset-x=30 data-offset-y=40></div>
|
||||
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='flexbox relative column rtl'>
|
||||
<div data-offset-x=80 data-offset-y=0></div>
|
||||
<div class='absolute' data-offset-x=80 data-offset-y=0></div>
|
||||
<div data-offset-x=80 data-offset-y=20></div>
|
||||
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class='flexbox wrap-reverse'>
|
||||
<div style="width:90px" data-offset-x=10 data-offset-y=80></div>
|
||||
<div class="absolute" data-offset-x=10 data-offset-y=80></div>
|
||||
<div data-offset-x=10 data-offset-y=30></div>
|
||||
<div class="absolute" data-offset-x=10 data-offset-y=80></div>
|
||||
<div data-offset-x=30 data-offset-y=30></div>
|
||||
<div class="absolute" data-offset-x=10 data-offset-y=80></div>
|
||||
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='flexbox relative'>
|
||||
<div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
|
||||
<div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div>
|
||||
<div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div>
|
||||
<div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
|
||||
</div>
|
||||
|
||||
<div class='flexbox align-items-stretch relative'>
|
||||
<div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div>
|
||||
<div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=0></div>
|
||||
<div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox wrap relative">
|
||||
<div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=0></div>
|
||||
<div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=0></div>
|
||||
<div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox wrap relative align-items-flex-end">
|
||||
<div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=80></div>
|
||||
<div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=80></div>
|
||||
<div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
|
||||
<div class="absolute" data-offset-x=0 data-offset-y=80></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var absolute = document.getElementById('placed-absolute');
|
||||
var beforePosition = absolute.getBoundingClientRect();
|
||||
document.querySelector('.flexbox').style.height = '101px';
|
||||
var afterPosition = absolute.getBoundingClientRect();
|
||||
|
||||
// Positioned element should not change position when the height of it's parent flexbox is changed.
|
||||
for (key in beforePosition) {
|
||||
test(function() {
|
||||
assert_equals(beforePosition[key], afterPosition[key]);
|
||||
}, 'position of ' + key);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Checks that we correctly handle border and
|
||||
padding in combination with abspos items">
|
||||
<style>
|
||||
.rect {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
outline: 3px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="../support/flexbox.css">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.rect')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="flexbox" style="padding-top: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="padding-top: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="direction: rtl; padding-top: 10px; padding-right: 20px;">
|
||||
<div class="rect" data-offset-x="50" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="direction: rtl; padding-top: 10px; padding-right: 20px;">
|
||||
<div class="rect" data-offset-x="50" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;">
|
||||
<div class="rect" data-offset-x="20" data-offset-y="50"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="flexbox" style="border-top: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="border-top: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;">
|
||||
<div class="rect" data-offset-x="50" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;">
|
||||
<div class="rect" data-offset-x="50" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;">
|
||||
<div class="rect" data-offset-x="0" data-offset-y="50"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Checks that we correctly handle when a flex item
|
||||
becomes absolutely positioned">
|
||||
<style>
|
||||
#flex {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: red;
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#item {
|
||||
background: green;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
|
||||
<script>
|
||||
function update() {
|
||||
var item = document.getElementById("item");
|
||||
item.offsetHeight;
|
||||
item.style.position = "absolute";
|
||||
item.offsetHeight;
|
||||
checkLayout("#flex");
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="update();">
|
||||
|
||||
<div id="flex">
|
||||
<div id="item" data-expected-width="500"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid.">
|
||||
<style>
|
||||
|
||||
.abspos {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
position: absolute;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.horizontal-tb {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.align-items-flex-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-items-flex-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.justify-content-flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-content-flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
<script>
|
||||
|
||||
var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
|
||||
var directions = ['ltr', 'rtl'];
|
||||
var justifyContents = ['flex-start', 'flex-end'];
|
||||
var alignItems = ['flex-start', 'flex-end'];
|
||||
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
|
||||
|
||||
// These were harvested from Firefox 76.0b4.
|
||||
var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50];
|
||||
|
||||
var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0];
|
||||
|
||||
var test_number = 1;
|
||||
|
||||
writingModes.forEach(function(flexWritingMode) {
|
||||
flexDirections.forEach(function(flexDirection) {
|
||||
directions.forEach(function(direction) {
|
||||
justifyContents.forEach(function(justifyContent) {
|
||||
alignItems.forEach(function(alignment) {
|
||||
var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment;
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerHTML = flexboxClassName + " .flexbox " + (test_number++);
|
||||
document.body.appendChild(title);
|
||||
|
||||
var flexbox = document.createElement('div');
|
||||
flexbox.className = 'flexbox ' + flexboxClassName;
|
||||
|
||||
var child = document.createElement('div');
|
||||
child.setAttribute('class', 'abspos');
|
||||
child.setAttribute("data-offset-x", x.shift());
|
||||
child.setAttribute("data-offset-y", y.shift());
|
||||
flexbox.appendChild(child);
|
||||
|
||||
var relpos = document.createElement('div');
|
||||
relpos.className = 'grid';
|
||||
relpos.appendChild(flexbox);
|
||||
|
||||
document.body.appendChild(relpos);
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!doctype html>
|
||||
<title>abspos flex children with top margins</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.org">
|
||||
<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="bookmark" href="https://crbug.com/808750">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
background: lightgray;
|
||||
width: 250px;
|
||||
height: 48px;
|
||||
|
||||
/* Add some margin so that overflowing things don't stomp on each other: */
|
||||
margin: 50px 10px;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
position: absolute;
|
||||
/* Margin-box is 100px tall (2px of border + 98px of content): */
|
||||
border: 1px solid teal;
|
||||
height: 98px;
|
||||
|
||||
width: 98px;
|
||||
left: 20px;
|
||||
}
|
||||
.marginBox {
|
||||
position: absolute;
|
||||
/* Margin-box is 100px tall
|
||||
(60px of margin-top + 2px of border + 38px of content): */
|
||||
margin-top: 60px;
|
||||
border: 1px solid orange;
|
||||
height: 38px;
|
||||
|
||||
width: 100px;
|
||||
left: 120px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="contentBox">
|
||||
aaa
|
||||
</div>
|
||||
<div class="marginBox">
|
||||
bbb
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="align-items: flex-end">
|
||||
<div class="contentBox">
|
||||
aaa
|
||||
</div>
|
||||
<div class="marginBox">
|
||||
bbb
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="align-items: center">
|
||||
<div class="contentBox">
|
||||
aaa
|
||||
</div>
|
||||
<div class="marginBox">
|
||||
bbb
|
||||
</div>
|
||||
</div>
|
||||
<div id=log style="clear:both"></div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
var elements = document.querySelectorAll(".contentBox, .marginBox");
|
||||
for (var i = 0; i < elements.length; i+=2) {
|
||||
assert_equals(elements[i].getBoundingClientRect().bottom,
|
||||
elements[i+1].getBoundingClientRect().bottom);
|
||||
}
|
||||
}, "The bottom of each pair of boxes should be the same");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>abspos flex children with top margins</title>
|
||||
<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.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="bookmark" href="https://crbug.com/886592">
|
||||
<meta name="assert" content="Check abspos position of flex children with margins in justify-content: flex-end container.">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
|
||||
<div style="display: flex; width: 200px; height: 100px; justify-content: flex-end; border: solid thick; position: relative;">
|
||||
<div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout('#abspos');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: auto; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. Additionally,
|
||||
the flex container derives its width from the "max-width" property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
max-width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: auto; /* height comes from contents */
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of row wrap-reverse flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a row wrap-reverse flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: auto; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="88"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="48"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="168"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="168"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="128"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="78"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="48"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="88"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="138"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="68"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="158"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="48"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="178"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="28"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="145"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="61"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="61"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="168"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="108"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="38"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="168"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="198"></div>
|
||||
<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="168"></div></div>
|
||||
<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="128"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 10px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 5px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. Additionally,
|
||||
the flex container derives its height from the "max-height" property.-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
max-height: 10px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 5px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of column wrap-reverse flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a column wrap-reverse flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="30"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="8" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="30"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="52"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="88" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="52"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="52"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="74"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="96"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="96"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="118"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="118"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="140"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="162"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="162"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="184"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="184"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="184"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="118" data-offset-y="228"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="88" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="228"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="138" data-offset-y="250"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="250"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="272"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="294"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="294"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="316"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="316"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="158" data-offset-y="360"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="360"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="178" data-offset-y="382"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="382"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="145" data-offset-y="426"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="61" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="61" data-offset-y="426"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="448"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="448"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto;
|
||||
height: 20px; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.flexbox div')">
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="8"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="30"></div>
|
||||
<div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="98" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="30"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="52"></div>
|
||||
<div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="58" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="58" data-offset-y="52"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="52"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="74"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="96"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="96"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="118"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="118"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="118"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="140"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="162"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="162"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="128" data-offset-y="184"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="184"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="184"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="88" data-offset-y="228"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="98" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="228"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="250"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="108" data-offset-y="250"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="272"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="294"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="294"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="316"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="316"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="48" data-offset-y="360"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="360"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="382"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="148" data-offset-y="382"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="61" data-offset-y="426"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="125" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="426"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="448"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="138" data-offset-y="448"></div>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div>
|
||||
<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div>
|
||||
<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title>
|
||||
<style>
|
||||
.default {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
height: 70px;
|
||||
border: 1px solid red;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.default > div {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.verticalWriting {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
border: 1px solid red;
|
||||
margin: 5px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.verticalWriting > div {
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.default, .verticalWriting'); ">
|
||||
<div id=log></div>
|
||||
<p>Test that we honor align-content even in single-line flex containers</p>
|
||||
<div class="default" style="align-content: flex-start">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: flex-end">
|
||||
<div data-offset-y="50">This text should be at the bottom of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: center">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-between">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-around">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-evenly">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: stretch">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: flex-start">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: flex-end">
|
||||
<div data-offset-x="50">This text should be at the right of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: center">
|
||||
<div data-offset-x="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: space-between">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: space-around">
|
||||
<div data-offset-x="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: stretch">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
|
||||
<style>
|
||||
.flex-horizontal {
|
||||
width:600px;
|
||||
display:flex;
|
||||
height:100px;
|
||||
background:gray;
|
||||
margin-bottom:100px;
|
||||
}
|
||||
.flex-vertical {
|
||||
width:100px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height:600px;
|
||||
background:gray;
|
||||
margin-top:200px;
|
||||
margin-bottom:100px;
|
||||
}
|
||||
.item-horizontal {
|
||||
width:150px;
|
||||
background:yellow;
|
||||
margin:10px;
|
||||
flex:none;
|
||||
}
|
||||
.item-vertical {
|
||||
height:150px;
|
||||
background:yellow;
|
||||
margin:10px;
|
||||
flex:none;
|
||||
}
|
||||
.content1-horizontal {
|
||||
width:100px;
|
||||
height:150px;
|
||||
background:red;
|
||||
}
|
||||
.content2-horizontal {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content3-horizontal {
|
||||
width:100px;
|
||||
height:50px;
|
||||
background:red;
|
||||
}
|
||||
.content1-vertical {
|
||||
width:150px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content2-vertical {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content3-vertical {
|
||||
width:50px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flex-horizontal, .flex-vertical');">
|
||||
<div id=log></div>
|
||||
<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
|
||||
<div class="flex-horizontal">
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-horizontal" style="flex-wrap:wrap;">
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-horizontal" style="flex-wrap:wrap;">
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical">
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical" style="flex-wrap:wrap;">
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical" style="flex-wrap:wrap;">
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
.horizontal > div {
|
||||
min-height: 20px;
|
||||
}
|
||||
.horizontal > :nth-child(1) {
|
||||
width: 100px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.horizontal > :nth-child(2) {
|
||||
width: 100px;
|
||||
}
|
||||
.horizontal > :nth-child(3) {
|
||||
width: 200px;
|
||||
}
|
||||
.horizontal > :nth-child(4) {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
}
|
||||
.vertical-rl > div {
|
||||
min-width: 20px;
|
||||
}
|
||||
.vertical-rl > :nth-child(1) {
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
.vertical-rl > :nth-child(2) {
|
||||
height: 10px;
|
||||
}
|
||||
.vertical-rl > :nth-child(3) {
|
||||
height: 20px;
|
||||
}
|
||||
.vertical-rl > :nth-child(4) {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.flexbox :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.flexbox :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
<p>Test to make sure that align-content works properly.</p>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
|
||||
<div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
|
||||
<div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
|
||||
<div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Negative overflow goes out the top. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should be the same as flex-start. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should safe center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stretch should only grow, not shrink. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- 0 lines should not crash. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
</div>
|
||||
|
||||
<!-- 1 line should not crash. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl">
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
|
||||
<div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
|
||||
<div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Negative overflow goes out the right. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
|
||||
<div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should be the same as flex-start. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should safe center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stretch should only grow, not shrink. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- 0 lines should not crash. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
|
||||
</div>
|
||||
|
||||
<!-- 1 line should not crash. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" />
|
||||
<meta name="assert" content="Flex items are positioned correctly in wrap-reverse align-content:start/end containers in either text direction.">
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 75px; /* make the row flexbox wrap */
|
||||
height: 150px;
|
||||
flex-wrap: wrap-reverse;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.flexitem {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: blue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexitem')">
|
||||
|
||||
<div class=flexbox style="align-content: start;">
|
||||
<div class=flexitem data-offset-x=0 data-offset-y=50></div>
|
||||
<div class=flexitem data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
|
||||
<div class=flexbox style="align-content: end;">
|
||||
<div class=flexitem data-offset-x=0 data-offset-y=100></div>
|
||||
<div class=flexitem data-offset-x=0 data-offset-y=50></div>
|
||||
</div>
|
||||
|
||||
<div class=flexbox style="align-content: start; direction: rtl;">
|
||||
<div class=flexitem data-offset-x=25 data-offset-y=50></div>
|
||||
<div class=flexitem data-offset-x=25 data-offset-y=0></div>
|
||||
</div>
|
||||
|
||||
<div class=flexbox style="align-content: end; direction: rtl">
|
||||
<div class=flexitem data-offset-x=25 data-offset-y=100></div>
|
||||
<div class=flexitem data-offset-x=25 data-offset-y=50></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-lr;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-x="21">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-x="56">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-lr;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-template: auto / auto;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-x="21">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-x="56">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-lr;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div data-offset-x="21">two<br>lines</div>
|
||||
<div data-offset-x="51">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-lr;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.inner {
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > *')">
|
||||
<div id="target">
|
||||
<table class="inner" data-offset-x="21">
|
||||
<tr>
|
||||
<td style="vertical-align: baseline;">
|
||||
<div>two<br>lines</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div data-offset-x="59">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-rl;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-x="146">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-x="191">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-rl;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-template: auto / auto;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-x="146">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-x="191">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-rl;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div data-offset-x="161">two<br>lines</div>
|
||||
<div data-offset-x="201">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: vertical-rl;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.inner {
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > *')">
|
||||
<div id="target">
|
||||
<table class="inner" data-offset-x="140">
|
||||
<tr>
|
||||
<td style="vertical-align: baseline;">
|
||||
<div>two<br>lines</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div data-offset-x="188">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-lr;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-y="11">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-y="21">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-lr;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-template: auto / auto;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-y="11">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-y="21">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-lr;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div data-offset-y="11">two<br>lines</div>
|
||||
<div data-offset-y="11">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-lr;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<table class="inner" data-offset-y="130">
|
||||
<tr>
|
||||
<td style="vertical-align: baseline;">
|
||||
<div>two<br>lines</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div data-offset-y="24">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-rl;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-y="11">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-y="21">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-rl;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-template: auto / auto;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div class="inner" data-offset-y="11">
|
||||
<div>two<br>lines</div>
|
||||
</div>
|
||||
<div data-offset-y="21">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<div data-offset-y="11">two<br>lines</div>
|
||||
<div data-offset-y="11">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-rl;
|
||||
align-items: baseline;
|
||||
border: 3px solid black;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: hotpink;
|
||||
writing-mode: horizontal-tb;
|
||||
padding-left: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: papayawhip;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.inner {
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
<div id="target">
|
||||
<table class="inner" data-offset-y="130">
|
||||
<tr>
|
||||
<td style="vertical-align: baseline;">
|
||||
<div>two<br>lines</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div data-offset-y="24">hello</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: align-self: center content with flex-direction: column.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#align-self-property">
|
||||
<link rel="help" href="https://crbug.com/750553"/>
|
||||
<meta name="assert" content="This test ensures that no unnecessary horizontal offset is applied to inline content in a 'align-self: center' box, inside of a flexbox with 'flex-direction: column'."/>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.content > div {
|
||||
width: 400px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.content')">
|
||||
|
||||
<div class="content" data-offset-x="0">
|
||||
<div data-offset-x="0">X</div>
|
||||
<div>X</div>
|
||||
<div>X</div>
|
||||
<div>X</div>
|
||||
<div>X</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-right: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(4) {
|
||||
background: orange;
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(5) {
|
||||
background: cyan;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(6) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-x="120">line1<br>line2</div>
|
||||
<div data-offset-x="105">line1<br>line2</div>
|
||||
<div data-offset-x="126">line1<br>line2</div>
|
||||
<div data-offset-x="20">line1<br>line2</div>
|
||||
<div data-offset-x="35">line1<br>line2</div>
|
||||
<div data-offset-x="42">line1<br>line2</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-right: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(4) {
|
||||
background: orange;
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(5) {
|
||||
background: cyan;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(6) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-x="120">line1<br>line2</div>
|
||||
<div data-offset-x="105">line1<br>line2</div>
|
||||
<div data-offset-x="126">line1<br>line2</div>
|
||||
<div data-offset-x="20">line1<br>line2</div>
|
||||
<div data-offset-x="35">line1<br>line2</div>
|
||||
<div data-offset-x="42">line1<br>line2</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-right: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(4) {
|
||||
background: orange;
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(5) {
|
||||
background: cyan;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(6) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-x="120">line1<br>line2</div>
|
||||
<div data-offset-x="105">line1<br>line2</div>
|
||||
<div data-offset-x="126">line1<br>line2</div>
|
||||
<div data-offset-x="20">line1<br>line2</div>
|
||||
<div data-offset-x="35">line1<br>line2</div>
|
||||
<div data-offset-x="42">line1<br>line2</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
flex-direction: column;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-right: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(4) {
|
||||
background: orange;
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
align-self: first baseline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#target > :nth-child(5) {
|
||||
background: cyan;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#target > :nth-child(6) {
|
||||
background: papayawhip;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-x="15">line1<br>line2</div>
|
||||
<div data-offset-x="0">line1<br>line2</div>
|
||||
<div data-offset-x="21">line1<br>line2</div>
|
||||
<div data-offset-x="125">line1<br>line2</div>
|
||||
<div data-offset-x="140">line1<br>line2</div>
|
||||
<div data-offset-x="147">line1<br>line2</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cornflowerblue 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
#target > div {
|
||||
flex: none;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-y="20"><span></span><br><span></span></div>
|
||||
<div data-offset-y="0"><span></span><br><span></span></div>
|
||||
<div data-offset-y="50"><span></span><br><span></span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cornflowerblue 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
#target > div {
|
||||
flex: none;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 20px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-y="20"><span></span><br><span></span></div>
|
||||
<div data-offset-y="0"><span></span><br><span></span></div>
|
||||
<div data-offset-y="55"><span></span><br><span></span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
|
||||
<style>
|
||||
#target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
align-items: last baseline;
|
||||
width: 200px;
|
||||
border: solid 3px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cornflowerblue 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
#target > div {
|
||||
flex: none;
|
||||
}
|
||||
#target > :nth-child(1) {
|
||||
background: lime;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 20px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#target > :nth-child(2) {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#target > :nth-child(3) {
|
||||
background: papayawhip;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#target > div')">
|
||||
|
||||
<div id="target">
|
||||
<div data-offset-y="20"><span></span><br><span></span></div>
|
||||
<div data-offset-y="0"><span></span><br><span></span></div>
|
||||
<div data-offset-y="55"><span></span><br><span></span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
fieldset {
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="20"><span></span></div>
|
||||
<fieldset data-offset-y="0">
|
||||
<legend><span></span></legend>
|
||||
<span></span><br><span></span>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="40"><span></span></div>
|
||||
<fieldset data-offset-y="0">
|
||||
<span></span><br><span></span>
|
||||
<legend><span></span></legend>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
fieldset {
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="35"><span></span></div>
|
||||
<fieldset data-offset-x="0">
|
||||
<legend><span></span></legend>
|
||||
<span></span><br><span></span>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="15"><span></span></div>
|
||||
<fieldset data-offset-x="0">
|
||||
<span></span><br><span></span>
|
||||
<legend><span></span></legend>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
fieldset {
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<fieldset data-offset-x="0">
|
||||
<legend><span></span></legend>
|
||||
<span></span><br><span></span>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="45"><span></span></div>
|
||||
<fieldset data-offset-x="0">
|
||||
<span></span><br><span></span>
|
||||
<legend><span></span></legend>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 200px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="15"><span></span></div>
|
||||
<div class="inner" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="15"><span></span></div>
|
||||
<div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="15"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- flex-wrap: wrap -->
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="25"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="70"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="25"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="50"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- flex-wrap: wrap-reverse -->
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="15"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="70"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="40"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="60"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="15"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 200px;
|
||||
margin-inline: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="40"><span></span></div>
|
||||
<div class="inner" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="40"><span></span></div>
|
||||
<div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="50"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="40"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="20"><span></span></div>
|
||||
<div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- flex-wrap: wrap -->
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="70"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="33"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="65"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="45"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="55"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="38"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="50"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="20"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- flex-wrap: wrap-reverse -->
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="75"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="63"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="35"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="60"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="43"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 200px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="115"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="115"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="115"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="115"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 200px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="110"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="110"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="45"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="45"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="40"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="40"><span></span></div>
|
||||
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 50px;"><span></span></div>
|
||||
<div style="font-size: 60px;"><span></span></div>
|
||||
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template: 50px 50px / 50px 50px 50px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.inner > div:first-child,
|
||||
.inner > div:last-child {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="35"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="100"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="55"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="115"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="25"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="90"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-y="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template: 50px 50px / 50px 50px 50px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.inner > div:first-child,
|
||||
.inner > div:last-child {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="110"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="48"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="90"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="33"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="115"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="53"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template: 50px 50px / 50px 50px 50px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.inner > div:first-child,
|
||||
.inner > div:last-child {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="93"><span></span></div>
|
||||
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="50"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="108"><span></span></div>
|
||||
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="88"><span></span></div>
|
||||
<div class="inner" style="align-items: end;" data-offset-x="10">
|
||||
<div style="font-size: 20px;"><span></span></div>
|
||||
<div style="font-size: 10px;"><span></span></div>
|
||||
<div style="font-size: 30px;"><span></span></div>
|
||||
<div style="font-size: 15px;"><span></span></div>
|
||||
<div style="font-size: 35px;"><span></span></div>
|
||||
<div style="font-size: 25px;"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 100px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
border: solid 10px;
|
||||
font-size: 40px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp div {
|
||||
background: orange;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Five lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="110"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="70"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Three lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="110"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Wrapping div -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="110"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nested div after first line -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="110"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Block within inline. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="110"><span></span></div>
|
||||
<div class="line-clamp" data-offset-y="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 100px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
padding: 10px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
border: solid 10px;
|
||||
font-size: 40px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp div {
|
||||
background: orange;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Five lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="65"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Three lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Wrapping div -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nested div after first line -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Block within inline. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 100px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
padding: 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 30px;
|
||||
}
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
border: solid 10px;
|
||||
font-size: 40px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp div {
|
||||
background: orange;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Five lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="65"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Three lines -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Wrapping div -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nested div after first line -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Block within inline. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="line-clamp" data-offset-x="10">
|
||||
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 100px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
}
|
||||
.multicol {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
}
|
||||
.multicol > div {
|
||||
break-inside: avoid;
|
||||
break-before: column;
|
||||
break-after: column;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Three columns, largest in the middle. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="20"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="100"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Start spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="30"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="140"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- End spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="20"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="140"><span></span></div>
|
||||
<div class="multicol" data-offset-y="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 200px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
margin: 40px;
|
||||
padding: 10px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
}
|
||||
.multicol {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
}
|
||||
.multicol > div {
|
||||
break-inside: avoid;
|
||||
break-before: column;
|
||||
break-after: column;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Three columns, largest in the middle. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="105"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="35"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Start spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="140"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="35"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- End spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="145"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
inline-size: 200px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
margin: 40px;
|
||||
padding: 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.target > div {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
}
|
||||
.multicol {
|
||||
columns: 3;
|
||||
column-fill: auto;
|
||||
padding: 10px;
|
||||
border: solid 10px;
|
||||
}
|
||||
.multicol > div {
|
||||
break-inside: avoid;
|
||||
break-before: column;
|
||||
break-after: column;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<!-- Three columns, largest in the middle. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="95"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Start spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="30"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="135"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- End spanning element. -->
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="25"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="140"><span></span></div>
|
||||
<div class="multicol" data-offset-x="10">
|
||||
<div style="font-size: 10px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 30px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="font-size: 20px;">
|
||||
<span></span><br><span></span><br><span></span>
|
||||
</div>
|
||||
<div style="column-span: all; background: orange;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
overflow: hidden;
|
||||
inline-size: 100px;
|
||||
block-size: 80px;
|
||||
margin: 10px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="45"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="55"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="30">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="50">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="110"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="20">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="90"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-y="20">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.inner {
|
||||
overflow: hidden;
|
||||
inline-size: 100px;
|
||||
block-size: 80px;
|
||||
margin: 10px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="70"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="60"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="100"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="120"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="40">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
font-size: 20px;
|
||||
inline-size: 300px;
|
||||
margin-block: 10px;
|
||||
padding: 10px;
|
||||
border: solid 3px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.inner {
|
||||
overflow: hidden;
|
||||
inline-size: 100px;
|
||||
block-size: 80px;
|
||||
margin: 10px;
|
||||
border: solid 5px;
|
||||
padding: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="40"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="50"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div>
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="10"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="40">
|
||||
<div style="margin-block-start: -200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="120"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="100"><span></span><br><span></span></div>
|
||||
<div class="inner" data-offset-x="20">
|
||||
<div style="margin-block-start: 200px;">
|
||||
<span></span><br><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.target > div, .target td {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
.target table { border-spacing: 0; }
|
||||
.target td { padding: 5px; min-width: 5px; min-height: 5px; }
|
||||
.target caption {
|
||||
margin: 10px;
|
||||
background: lime;
|
||||
block-size: 20px;
|
||||
}
|
||||
.target span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="45"><span></span></div>
|
||||
<table data-offset-y="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="95"><span></span></div>
|
||||
<table data-offset-y="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-y="20"><span></span></div>
|
||||
<table data-offset-y="0">
|
||||
<tr>
|
||||
<td style="border: solid 10px;"></td>
|
||||
<td style="border: solid 5px;"></td>
|
||||
<td style="border: solid 20px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: solid 10px;"></td>
|
||||
<td style="border: solid 5px;"></td>
|
||||
<td style="border: solid 20px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-y="70"><span></span></div>
|
||||
<table data-offset-y="0">
|
||||
<tr>
|
||||
<td style="border: solid 10px;"></td>
|
||||
<td style="border: solid 5px;"></td>
|
||||
<td style="border: solid 20px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: solid 10px;"></td>
|
||||
<td style="border: solid 5px;"></td>
|
||||
<td style="border: solid 20px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.target > div, .target td {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
.target table { border-spacing: 0; }
|
||||
.target td { padding: 5px; min-width: 5px; min-height: 5px; }
|
||||
.target caption {
|
||||
margin: 10px;
|
||||
background: lime;
|
||||
block-size: 20px;
|
||||
}
|
||||
.target span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="115"><span></span></div>
|
||||
<table data-offset-x="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="65"><span></span></div>
|
||||
<table data-offset-x="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
|
||||
<style>
|
||||
.target {
|
||||
display: flex;
|
||||
position: relative;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.target > div, .target td {
|
||||
background: hotpink;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
.target table { border-spacing: 0; }
|
||||
.target td { padding: 5px; min-width: 5px; min-height: 5px; }
|
||||
.target caption {
|
||||
margin: 10px;
|
||||
background: lime;
|
||||
block-size: 20px;
|
||||
}
|
||||
.target span {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: solid cyan 3px;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.target > *')">
|
||||
|
||||
<div class="target" style="align-items: first baseline;">
|
||||
<div data-offset-x="45"><span></span></div>
|
||||
<table data-offset-x="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="target" style="align-items: last baseline;">
|
||||
<div data-offset-x="95"><span></span></div>
|
||||
<table data-offset-x="0">
|
||||
<caption>top</caption>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
<td><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: baseline;">
|
||||
<td><span></span><br><span></span></td>
|
||||
<td style="font-size: 10px;"><span></span><br><span></span></td>
|
||||
</tr>
|
||||
<caption style="caption-side: bottom;">bottom</caption>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: box-sizing</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing">
|
||||
<meta name="assert" content="This test checks the interactions between the flex layout mode and the two possible values for the box-sizing property: border-box and content-box" />
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
.h3 {
|
||||
height: 300px;
|
||||
}
|
||||
.w3 {
|
||||
width: 300px;
|
||||
}
|
||||
.h4 {
|
||||
height: 400px;
|
||||
}
|
||||
.w4 {
|
||||
width: 400px;
|
||||
}
|
||||
.border-box, .flexbox > div {
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border: 2px solid lightblue;
|
||||
border-top-width: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
|
||||
All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px border-top), we expect offsetWidth/Height to be <b>100x100</b>
|
||||
|
||||
<h3>flex-flow: default, orange box has width: 300px</h3>
|
||||
<div class="flexbox" style="width: 300px">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: default, orange box has width: 400px</h3>
|
||||
<div class="flexbox" style="width: 400px">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: default, orange box has width: auto</h3>
|
||||
<div class="flexbox">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: default, orange box has width: auto, flex-box has box-sizing: border-box</h3>
|
||||
<div class="flexbox border-box">
|
||||
<div data-expected-width=30></div>
|
||||
<div data-expected-width=30></div>
|
||||
<div data-expected-width=30></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: column, red box has height: 300px</h3>
|
||||
<div class="flexbox column" style="height: 300px">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: column, red box has height: 400px</h3>
|
||||
<div class="flexbox column" style="height: 400px">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: column, red box has height: auto</h3>
|
||||
<div class="flexbox column">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-box has box-sizing: border-box and flex-wrap: wrap;</h3>
|
||||
<div class="flexbox column wrap" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=100 data-expected-height=200>
|
||||
<div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=203></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3>
|
||||
<div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=110 data-expected-height=210>
|
||||
<div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103></div>
|
||||
</div>
|
||||
|
||||
<h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1</h3>
|
||||
<div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data-expected-height=343>
|
||||
<div style="flex: 1;" data-expected-height=111></div>
|
||||
<div style="flex: 1;" data-expected-height=111></div>
|
||||
<div style="flex: 1;" data-expected-height=111></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addExpectedSizes(flexItem) {
|
||||
if (!flexItem.hasAttribute('data-expected-height'))
|
||||
flexItem.setAttribute('data-expected-height', 100);
|
||||
if (!flexItem.hasAttribute('data-expected-width'))
|
||||
flexItem.setAttribute('data-expected-width', 100);
|
||||
}
|
||||
[].forEach.call(document.querySelectorAll(".flexbox > div"), addExpectedSizes);
|
||||
[].forEach.call(document.querySelectorAll(".border-box"), addExpectedSizes);
|
||||
checkLayout('.flexbox');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: minimum / maximum sizes with box-sizing: border-box</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#box-model">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#min-max-widths">
|
||||
<meta name="assert" content="This test checks that a minimum and maximum sizes are correctly computed for flexbox children.">
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: teal;
|
||||
}
|
||||
.flexbox > div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;" data-expected-width=30></div>
|
||||
<div style="border: 5px solid orange; padding: 5px; min-width: 30px; width: 10px;" data-expected-width=30></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div style="border: 5px solid orange; padding: 5px; max-height: 30px; height: 40px;" data-expected-height=30></div>
|
||||
<div style="border: 5px solid orange; padding: 5px; min-height: 30px; height: 10px;" data-expected-height=30></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Canvas size dynamic change in flexbox layout</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.red {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background: red;
|
||||
}
|
||||
canvas {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<div id=log></div>
|
||||
|
||||
<div class="red">
|
||||
<div class="flexbox column">
|
||||
<!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from
|
||||
the fallback width of replaced elements. 400 from the attribute.
|
||||
After stretching to 600px wide, the height should be 800px. -->
|
||||
<canvas id="canvas" data-expected-height="800"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
|
||||
requestAnimationFrame(function() {
|
||||
canvas.height = 400;
|
||||
checkLayout('.flexbox');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Flexbox: flex items inside flex-direction:column</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<meta name="assert" content="This test ensures that when main axis is logical y, layout flex items before getting intrinsic size."/>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function change() {
|
||||
document.body.offsetTop;
|
||||
var flex = document.getElementById("flex");
|
||||
flex.style.width = "100px";
|
||||
checkLayout("#container");
|
||||
}
|
||||
</script>
|
||||
<body onload="change()">
|
||||
<p>There should be a green square below. No red.</p>
|
||||
<!-- #container is just here to make sure the test fails more reliably visually if the bug is present. -->
|
||||
<div id="container" style="width:500px;">
|
||||
<div id="flex" style="display:flex; flex-direction:column; width:70px;" data-expected-height="100">
|
||||
<div style="background:red;" data-expected-height="100">
|
||||
<div style="float:left; width:50px; height:100px; background:green;"></div>
|
||||
<div style="float:left; width:50px; height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue