mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision 5e0db3c717532a88040300e65ce7c8b29004d93c
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
98cf3a1895
commit
02952b63dd
409 changed files with 6744 additions and 2463 deletions
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></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 class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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 */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></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 class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-left: 3px;
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -7px; }
|
||||
.small .alignEnd { margin-top: -14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--right--></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"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-img-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
grid: 2px 30px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"><img src="support/colors-8x16.png"
|
||||
style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: right"></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"><img src="support/colors-8x16.png"
|
||||
style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -6px; }
|
||||
.small .alignEnd { margin-top: -12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--right--></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"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-img-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 40px;
|
||||
width: 22px;
|
||||
grid: 2px 30px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"><img src="support/colors-8x16.png"
|
||||
style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: right"></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"><img src="support/colors-8x16.png"
|
||||
style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-rtl-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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 */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-rtl-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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 */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-rtl-003-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-rtl-004-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
br { clear: both }
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.vertRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.relPos {
|
||||
position: relative;
|
||||
}
|
||||
.relPos > * {
|
||||
height: 35px;
|
||||
width: 33px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container vertRL"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container relPos vertRL"><div></div></div>
|
||||
<div class="container relPos"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-safe-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
br { clear: both }
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
justify-self: safe end;
|
||||
align-self: safe center;
|
||||
}
|
||||
.vertRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.relPos {
|
||||
position: relative;
|
||||
}
|
||||
.relPos > * {
|
||||
height: 35px;
|
||||
width: 33px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container vertRL"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container relPos vertRL"><div></div></div>
|
||||
<div class="container relPos"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-vertWM-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-vertWM-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-vertWM-003-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-align-self-vertWM-004-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></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"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 2px; }
|
||||
.big .alignCenter { margin-left: 9px; }
|
||||
.big .alignEnd { margin-left: 16px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
justify-items: center; /* To exercise 'justify-self: auto' on children */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 26px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignCenter"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
justify-items: center; /* To exercise 'justify-self: auto' on children */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 2px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 24px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-img-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 30px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 17px; }
|
||||
.big .alignEnd { margin-left: 34px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-img-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 30px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png"
|
||||
style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-rtl-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-rtl-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-rtl-003-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-rtl-004-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
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 {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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 */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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 */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-003-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
|
||||
<link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-004-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
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: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Loading…
Add table
Add a link
Reference in a new issue