Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html dir=rtl>
<title>Safe vs Unsafe justify-self in RTL Grid Layout</title>
<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>