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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: 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: Created 5 years, 5 months 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 | Source/core/layout/LayoutFlexibleBox.cpp » ('j') | Source/core/layout/LayoutFlexibleBox.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/css3/flexbox/flex-align-new-values.html
diff --git a/LayoutTests/css3/flexbox/flex-align-new-values.html b/LayoutTests/css3/flexbox/flex-align-new-values.html
new file mode 100644
index 0000000000000000000000000000000000000000..d664e66351c987956e4518e4bec6109087c1a2db
--- /dev/null
+++ b/LayoutTests/css3/flexbox/flex-align-new-values.html
@@ -0,0 +1,460 @@
+<!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;
+}
+
+.rowReverse { flex-direction: row-reverse; }
+.column { flex-direction: column; }
+.columnReverse { flex-direction: column-reverse; }
+.wrap { flex-wrap: wrap; }
+.wrapReverse { flex-wrap: wrap-reverse; }
+.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>horizontal-tb LTR</b> | flex-direction: <b>row</b> | flex-wrap: <b>wrap</b></p>
+<div class="flexbox wrap">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 rowReverse wrap">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 wrapReverse">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 rowReverse wrapReverse">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item 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 wrapReverse">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item 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 columnReverse wrap">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item 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 columnReverse wrapReverse">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item 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 flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 rowReverse wrap">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 wrapReverse">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item 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 rowReverse wrapReverse">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and wrap-reverse -->
+<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 flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="525" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="0" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item right" data-offset-x="225" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and column -->
+<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 wrapReverse">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="225" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="0" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="525" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="300" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item right" data-offset-x="525" data-offset-y="225">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and wrap-reverse -->
+<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 columnReverse wrap">
+ <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="525" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="300" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="225" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="0" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item right" data-offset-x="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- this is equivalent to LTR and columnReverse -->
+<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 columnReverse wrapReverse">
+ <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item start" data-offset-x="225" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item end" data-offset-x="0" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item selfStart" data-offset-x="525" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item selfEnd" data-offset-x="300" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item 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 flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR 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 rowReverse wrap">
+ <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR 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 flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR 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 rowReverse wrapReverse">
+ <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalLR 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 flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="525" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalLR 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 wrapReverse">
+ <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="0" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="225" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalLR 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 columnReverse wrap">
+ <div class="item verticalLR flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="525" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalLR 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 columnReverse wrapReverse">
+ <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalLR flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalLR start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalLR end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalLR selfStart" data-offset-x="0" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalLR selfEnd" data-offset-x="225" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalLR left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalLR 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 writin-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 flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writin-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 rowReverse wrap">
+ <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writin-mode -->
ikilpatrick 2015/08/02 23:15:37 s/writin/writing & elsewhere.
+<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 flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="150" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="300" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="450" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL right" data-offset-x="525" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+<!-- This is equivalent to the case using same writin-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 rowReverse wrapReverse">
+ <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="375" data-offset-y="0">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="300" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
+ <div class="item verticalRL 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 flexStart" data-offset-x="0" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="0" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="525" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="300" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="300" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalRL 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 wrapReverse">
+ <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="0">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="300" data-offset-y="150">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="525" data-offset-y="225">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="0" data-offset-y="75">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="0" data-offset-y="150">item7 <b>left</b></div>
+ <div class="item verticalRL 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 columnReverse wrap">
+ <div class="item verticalRL flexStart" data-offset-x="0" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="0" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="525" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="300" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="300" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalRL 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 columnReverse wrapReverse">
+ <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="225">item1 <b>flex-start</b></div>
+ <div class="item verticalRL flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>flex-end</b></div>
+ <div class="item verticalRL start" data-offset-x="300" data-offset-y="75">item3 <b>start</b></div>
+ <div class="item verticalRL end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
+ <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="225">item5 <b>self-start</b></div>
+ <div class="item verticalRL selfEnd" data-offset-x="0" data-offset-y="150">item6 <b>self-end</b></div>
+ <div class="item verticalRL left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
+ <div class="item verticalRL right" data-offset-x="225" data-offset-y="0">item8 <b>right</b></div>
+</div>
+
+
+
+</div>
+</body>
+</html>
« no previous file with comments | « no previous file | Source/core/layout/LayoutFlexibleBox.cpp » ('j') | Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698