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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-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.html
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.html b/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.html
new file mode 100644
index 0000000000000000000000000000000000000000..1a6f2af0fa308fccc2fc03757ab138f96e175c4e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values.html
@@ -0,0 +1,439 @@
+<!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;
+}
+
+.horizontalTB { -webkit-writing-mode: horizontal-tb; }
cbiesinger 2015/12/01 00:12:49 no need for the -webkit- prefix
+.horizontalBT { -webkit-writing-mode: horizontal-bt; }
cbiesinger 2015/12/01 00:12:49 hasn't this one been removed?
+.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>
cbiesinger 2015/12/01 00:12:49 You can now use check-layout-th.js and then don't
+<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>horizontal-tb LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox 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="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox row-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="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox 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="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox 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="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="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox 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="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="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox column 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="225" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox column-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="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox 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="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="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- RTL direction -->
+
+<!-- this is equivalent to LTR and row-reverse -->
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox directionRTL 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="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row -->
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox 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="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="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row-reverse -->
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-flow: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox 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="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="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and row -->
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox directionRTL row-reverse 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="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox directionRTL column 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="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="525" data-offset-y="150">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="0" 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="225" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox 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="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="225" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="0" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="525" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="300" 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="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox 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="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="525" data-offset-y="75">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="0" 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="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox directionRTL column-reverse 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="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item align-self-start" data-offset-x="225" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item align-self-end" data-offset-x="0" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item align-self-self-start" data-offset-x="525" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item align-self-self-end" data-offset-x="300" 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="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- Orthogonal writing-modes (vertical-LR should not affect alignment results, since it shares edges with LTR direction)-->
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox wrap">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox row-reverse wrap">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox wrap-reverse">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox row-reverse wrap-reverse">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox column wrap">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox column wrap-reverse">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="225" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox column-reverse wrap">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox column-reverse wrap-reverse">
+ <div class="item verticalLR align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalLR align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalLR align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalLR align-self-self-start" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalLR align-self-self-end" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalLR align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalLR align-self-right" data-offset-x="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- Orthogonal writing-modes (vertical-RL it will affect how self-start/end are determined, but only when using column flow) -->
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox wrap">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox row-reverse wrap">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL 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>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox wrap-reverse">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writing-mode -->
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox row-reverse wrap-reverse">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox column wrap">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="525" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="300" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox column wrap-reverse">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="0" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="225" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox column-reverse wrap">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="525" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="300" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-direction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
+<div class="flexbox column-reverse wrap-reverse">
+ <div class="item verticalRL align-self-flex-start" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL align-self-flex-end" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalRL align-self-start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalRL align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalRL align-self-self-start" data-offset-x="225" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalRL align-self-self-end" data-offset-x="0" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalRL align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalRL align-self-right" data-offset-x="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+</body>
+</html>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698