mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
height: 20px;
|
||||
}
|
||||
.large .item {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-top: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-top: 10px }
|
||||
.large .center
|
||||
{ margin-top: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-top: -10px; }
|
||||
.safe .item
|
||||
{ margin-top: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Safe vs Unsafe align-self in Row Flex Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<link rel="match" href="self-align-safe-unsafe-flex-001-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
height: 20px;
|
||||
}
|
||||
.large .item {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.center { align-self: center; }
|
||||
.start { align-self: start; }
|
||||
.end { align-self: end; }
|
||||
.self-start { align-self: self-start; }
|
||||
.self-end { align-self: self-end; }
|
||||
.flex-start { align-self: flex-start; }
|
||||
.flex-end { align-self: flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-left: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-left: 10px }
|
||||
.large .center
|
||||
{ margin-left: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-left: -10px; }
|
||||
.safe .item
|
||||
{ margin-left: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Safe vs Unsafe align-self in Column Flex Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<link rel="match" href="self-align-safe-unsafe-flex-002-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.center { align-self: center; }
|
||||
.start { align-self: start; }
|
||||
.end { align-self: end; }
|
||||
.self-start { align-self: self-start; }
|
||||
.self-end { align-self: self-end; }
|
||||
.flex-start { align-self: flex-start; }
|
||||
.flex-end { align-self: flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir=rtl>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-right: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-right: 10px }
|
||||
.large .center
|
||||
{ margin-right: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-right: -10px; }
|
||||
.safe .item
|
||||
{ margin-right: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir=rtl>
|
||||
<title>Safe vs Unsafe align-self in RTL Column Flex Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<link rel="match" href="self-align-safe-unsafe-flex-003-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.center { align-self: center; }
|
||||
.start { align-self: start; }
|
||||
.end { align-self: end; }
|
||||
.self-start { align-self: self-start; }
|
||||
.self-end { align-self: self-end; }
|
||||
.flex-start { align-self: flex-start; }
|
||||
.flex-end { align-self: flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
height: 20px;
|
||||
}
|
||||
.large .item {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-top: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-top: 10px }
|
||||
.large .center
|
||||
{ margin-top: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-top: -10px; }
|
||||
.large.safe .item
|
||||
{ margin-top: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Safe vs Unsafe align-self in Grid Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#column-align">
|
||||
<link rel="match" href="self-align-safe-unsafe-grid-001-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
height: 20px;
|
||||
}
|
||||
.large .item {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.center { align-self: center; }
|
||||
.start { align-self: start; }
|
||||
.end { align-self: end; }
|
||||
.self-start { align-self: self-start; }
|
||||
.self-end { align-self: self-end; }
|
||||
.flex-start { align-self: flex-start; }
|
||||
.flex-end { align-self: flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
|
||||
.safe .center { align-self: safe center; }
|
||||
.safe .start { align-self: safe start; }
|
||||
.safe .end { align-self: safe end; }
|
||||
.safe .self-start { align-self: safe self-start; }
|
||||
.safe .self-end { align-self: safe self-end; }
|
||||
.safe .flex-start { align-self: safe flex-start; }
|
||||
.safe .flex-end { align-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-left: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-left: 10px }
|
||||
.large .center
|
||||
{ margin-left: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-left: -10px; }
|
||||
.large.safe .item
|
||||
{ margin-left: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Safe vs Unsafe justify-self in Grid Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/row-align">
|
||||
<link rel="match" href="self-align-safe-unsafe-grid-002-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.center { justify-self: center; }
|
||||
.start { justify-self: start; }
|
||||
.end { justify-self: end; }
|
||||
.self-start { justify-self: self-start; }
|
||||
.self-end { justify-self: self-end; }
|
||||
.flex-start { justify-self: flex-start; }
|
||||
.flex-end { justify-self: flex-end; }
|
||||
|
||||
.safe .center { justify-self: safe center; }
|
||||
.safe .start { justify-self: safe start; }
|
||||
.safe .end { justify-self: safe end; }
|
||||
.safe .self-start { justify-self: safe self-start; }
|
||||
.safe .self-end { justify-self: safe self-end; }
|
||||
.safe .flex-start { justify-self: safe flex-start; }
|
||||
.safe .flex-end { justify-self: safe flex-end; }
|
||||
|
||||
.safe .center { justify-self: safe center; }
|
||||
.safe .start { justify-self: safe start; }
|
||||
.safe .end { justify-self: safe end; }
|
||||
.safe .self-start { justify-self: safe self-start; }
|
||||
.safe .self-end { justify-self: safe self-end; }
|
||||
.safe .flex-start { justify-self: safe flex-start; }
|
||||
.safe .flex-end { justify-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir=rtl>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.small .center
|
||||
{ margin-right: 5px }
|
||||
.small .end,
|
||||
.small .self-end,
|
||||
.small .flex-end
|
||||
{ margin-right: 10px }
|
||||
.large .center
|
||||
{ margin-right: -5px; }
|
||||
.large .end,
|
||||
.large .self-end,
|
||||
.large .flex-end
|
||||
{ margin-right: -10px; }
|
||||
.large.safe .item
|
||||
{ margin-right: 0; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir=rtl>
|
||||
<title>Safe vs Unsafe justify-self in RTL Grid Layout</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
|
||||
<link rel="match" href="self-align-safe-unsafe-grid-003-ref.html">
|
||||
<style>
|
||||
/* Label things */
|
||||
body > div {
|
||||
display: flow-root;
|
||||
}
|
||||
body > div::before {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Test Framework */
|
||||
.container {
|
||||
border: solid aqua;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: orange;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Test */
|
||||
.small .item {
|
||||
width: 20px;
|
||||
}
|
||||
.large .item {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.center { justify-self: center; }
|
||||
.start { justify-self: start; }
|
||||
.end { justify-self: end; }
|
||||
.self-start { justify-self: self-start; }
|
||||
.self-end { justify-self: self-end; }
|
||||
.flex-start { justify-self: flex-start; }
|
||||
.flex-end { justify-self: flex-end; }
|
||||
|
||||
.safe .center { justify-self: safe center; }
|
||||
.safe .start { justify-self: safe start; }
|
||||
.safe .end { justify-self: safe end; }
|
||||
.safe .self-start { justify-self: safe self-start; }
|
||||
.safe .self-end { justify-self: safe self-end; }
|
||||
.safe .flex-start { justify-self: safe flex-start; }
|
||||
.safe .flex-end { justify-self: safe flex-end; }
|
||||
|
||||
.safe .center { justify-self: safe center; }
|
||||
.safe .start { justify-self: safe start; }
|
||||
.safe .end { justify-self: safe end; }
|
||||
.safe .self-start { justify-self: safe self-start; }
|
||||
.safe .self-end { justify-self: safe self-end; }
|
||||
.safe .flex-start { justify-self: safe flex-start; }
|
||||
.safe .flex-end { justify-self: safe flex-end; }
|
||||
</style>
|
||||
|
||||
<div class="default small">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unsafe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="safe large">
|
||||
<div class="container">
|
||||
<div class="item normal"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item center"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item self-end"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-start"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item flex-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue