layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-4.xhtml@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-4.xhtml
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- Testcase for align-items / align-self behavior, with all the possible
7 values included on different items within a flex container, and with the
8 flex container being skinnier than its items, and with "direction: rtl" to
9 swap the horizontal (cross) axis. -->
10 <html xmlns="http://www.w3.org/1999/xhtml">
11 <head>
12 <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title>
13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
14 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-items-property"/>
15 <link rel="match" href="flexbox-align-self-vert-rtl-4-ref.xhtml"/>
16 <style>
17 .flexbox {
18 border: 1px dashed blue;
19 width: 4px;
20 display: flex;
21 flex-direction: column;
22 direction: rtl;
23 float: left;
24 font-family: sans-serif;
25 font-size: 10px;
26 margin-left: 80px;
27 }
29 .flexbox > div {
30 margin: 1px 2px 3px 4px;
31 border-width: 2px 3px 4px 5px;
32 padding: 3px 4px 5px 6px;
34 border-style: dotted;
35 }
37 div.big {
38 font-size: 18px;
39 width: 50px;
40 }
42 /* Classes for each of the various align-self values */
43 .flex-start {
44 background: lime;
45 align-self: flex-start;
46 }
47 .flex-end {
48 background: orange;
49 align-self: flex-end;
50 }
51 .center {
52 background: lightblue;
53 align-self: center;
54 }
55 .baseline {
56 background: teal;
57 align-self: baseline;
58 }
59 .stretch {
60 background: pink;
61 align-self: stretch;
62 }
63 </style>
64 </head>
65 <body>
66 <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs
67 swapped in the ordering, with respect to the other
68 flexbox-align-self-* testcases. That's because "stretch" and
69 "flex-end" overflow in opposite directions, and in RTL mode (with 2
70 flex containers side by side), they overflow *at* each other and
71 overlap. If we swap them, they float away from each other and we can
72 still see them.) -->
73 <div class="flexbox">
74 <div class="flex-start">start</div>
75 <div class="flex-start big">a b</div>
76 <div class="stretch">stretch</div>
77 <div class="stretch big">a b</div>
78 <div class="center">center</div>
79 <div class="center big">a b</div>
80 </div>
81 <div class="flexbox">
82 <div class="baseline">base</div>
83 <div class="baseline big">abc</div>
84 <div class="flex-end">end</div>
85 <div class="flex-end big">a b</div>
86 </div>
87 </body>
88 </html>
