Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr.html

Issue 1268753002: [css-flexbox] Implementing new CSS Box Alignment values (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch rebased and applied suggested changes. Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.html ('K') | « third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-expected.txt ('k') | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr.html
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr.html b/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef5842a78be8bcedc3ebfcd0499c4feb3b51e273
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr.html
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/flexbox.css" rel="stylesheet">
+<style>
+body {
+ margin: 0;
+}
+.flexbox {
+ width: 600px;
+ height: 300px;
+ background-color: grey;
+ position: relative;
+}
+.item {
+ width: 75px;
+ height: 75px;
+}
+
+.flexStart { align-self: flex-start; }
+.flexEnd { align-self: flex-end; }
+.selfStart { align-self: self-start; }
+.selfEnd { align-self: self-end; }
+.start { align-self: start; }
+.end { align-self: end; }
+.left { align-self: left; }
+.right { align-self: right; }
+
+.horizontalTB { -webkit-writing-mode: horizontal-tb; }
+.horizontalBT { -webkit-writing-mode: horizontal-bt; }
+.verticalLR { -webkit-writing-mode: vertical-lr; }
+.verticalRL { -webkit-writing-mode: vertical-rl; }
+.directionLTR { direction: ltr; }
+.directionRTL { direction: rtl; }
+
+.flexbox > :nth-child(1) { background-color: #FCC; }
+.flexbox > :nth-child(2) { background-color: #CFC; }
+.flexbox > :nth-child(3) { background-color: #CCF; }
+.flexbox > :nth-child(4) { background-color: #C99; }
+.flexbox > :nth-child(5) { background-color: #9C9; }
+.flexbox > :nth-child(6) { background-color: #99C; }
+.flexbox > :nth-child(7) { background-color: #FFC; }
+.flexbox > :nth-child(8) { background-color: #FCF; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.flexbox')">
+
+<p>This test checks that the CSS Box Alignment new values work as expected when used in align-self property.</p>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="300" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR row-reverse wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="300" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-flow: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR row-reverse wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column-reverse wrap">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column-reverse wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- RTL direction -->
+
+<!-- this is equivalent to LTR and row-reverse -->
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR directionRTL wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="300" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row -->
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR directionRTL row-reverse wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="300" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row-reverse -->
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-flow: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR directionRTL wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row -->
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR directionRTL row-reverse wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR directionRTL column wrap">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="150" data-offset-y="225">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="375" data-offset-y="0">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR directionRTL column wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="150" data-offset-y="225">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="375" data-offset-y="0">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR directionRTL column-reverse wrap">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="375" data-offset-y="225">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="300" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="225" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="150" data-offset-y="0">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>vertical-lr RTL</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR directionRTL column-reverse wrap-reverse">
+ <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="375" data-offset-y="225">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="300" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="225" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="150" data-offset-y="0">item6 <b>self-end</b></div>
+ <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- Orthogonal writing-modes (horizontal-TB should not affect alignment results, since it shares edges with LTR direction)-->
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR wrap">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="300" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR row-reverse wrap">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="300" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR wrap-reverse">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR row-reverse wrap-reverse">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column wrap">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column wrap-reverse">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column-reverse wrap">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column-reverse wrap-reverse">
+ <div class="item horizontalTB align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalTB align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item horizontalTB align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalTB align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalTB align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalTB align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalTB align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalTB align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- Orthogonal writing-modes (horizontal-BT it will affect how self-start/end are determined, but only when using column flow) -->
+<!-- However, horizontal-BT is not currently a valid value, hence orthogonality wont be applied -->
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR wrap">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="300" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR row-reverse wrap">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="300" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR wrap-reverse">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR row-reverse wrap-reverse">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column wrap">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column wrap-reverse">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox verticalLR column-reverse wrap">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>vertical-lr LTR</b> | items: <b>horizontal-bt LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox verticalLR column-reverse wrap-reverse">
+ <div class="item horizontalBT align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item horizontalBT align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item horizontalBT align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item horizontalBT align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item horizontalBT align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item horizontalBT align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item horizontalBT align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item horizontalBT align-self-right" data-offset-x="0" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+</body>
+</html>
« third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.html ('K') | « third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-expected.txt ('k') | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-vertical-lr-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698