layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-3.xhtml@b8a032363ba2
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-3.xhtml
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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 with a variety of 'display: flex' examples testing each
7 possible value of the 'justify-content' property, and with each
8 individual flex item being wider than the flexbox itself (so that
9 there isn't any packing space available).
10 * For 'flex-start'/'space-between', we should overflow on the end
11 (right) side.
12 * For 'flex-end', we should overflow on the start (left) side.
13 * For 'center'/'space-around', we should overflow equally on both sides.
14 -->
15 <html xmlns="http://www.w3.org/1999/xhtml">
16 <head>
17 <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow</title>
18 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
19 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#justify-content-property"/>
20 <link rel="match" href="flexbox-justify-content-horiz-3-ref.xhtml"/>
21 <style>
22 body { margin-left: 100px; } /* So we can see left-overflowed stuff */
23 div.flexbox {
24 width: 30px;
25 display: flex;
26 margin-bottom: 2px;
27 }
28 div.a {
29 height: 20px;
30 flex: 0 0 35px;
31 background: lightgreen;
32 }
33 div.b {
34 height: 20px;
35 flex: 0 0 40px;
36 background: pink;
37 }
38 div.c {
39 height: 20px;
40 flex: 0 0 45px;
41 background: orange;
42 }
43 </style>
44 </head>
45 <body>
47 <!-- default (start) -->
48 <div class="flexbox">
49 <div class="a"/>
50 </div>
51 <div class="flexbox">
52 <div class="a"/><div class="b"></div>
53 </div>
54 <div class="flexbox">
55 <div class="a"/><div class="b"/><div class="c"/>
56 </div>
58 <!-- flex-start -->
59 <div class="flexbox" style="justify-content: flex-start">
60 <div class="a"/>
61 </div>
62 <div class="flexbox" style="justify-content: flex-start">
63 <div class="a"/><div class="b"/>
64 </div>
65 <div class="flexbox" style="justify-content: flex-start">
66 <div class="a"/><div class="b"/><div class="c"/>
67 </div>
69 <!-- flex-end -->
70 <div class="flexbox" style="justify-content: flex-end">
71 <div class="a"/>
72 </div>
73 <div class="flexbox" style="justify-content: flex-end">
74 <div class="a"/><div class="b"/>
75 </div>
76 <div class="flexbox" style="justify-content: flex-end">
77 <div class="a"/><div class="b"/><div class="c"/>
78 </div>
80 <!-- center -->
81 <div class="flexbox" style="justify-content: center">
82 <div class="a"/>
83 </div>
84 <div class="flexbox" style="justify-content: center">
85 <div class="a"/><div class="b"/>
86 </div>
87 <div class="flexbox" style="justify-content: center">
88 <div class="a"/><div class="b"/><div class="c"/>
89 </div>
91 <!-- space-between -->
92 <div class="flexbox" style="justify-content: space-between">
93 <div class="a"/>
94 </div>
95 <div class="flexbox" style="justify-content: space-between">
96 <div class="a"/><div class="b"/>
97 </div>
98 <div class="flexbox" style="justify-content: space-between">
99 <div class="a"/><div class="b"/><div class="c"/>
100 </div>
102 <!-- space-around -->
103 <div class="flexbox" style="justify-content: space-around">
104 <div class="a"/>
105 </div>
106 <div class="flexbox" style="justify-content: space-around">
107 <div class="a"/><div class="b"/>
108 </div>
109 <div class="flexbox" style="justify-content: space-around">
110 <div class="a"/><div class="b"/><div class="c"/>
111 </div>
113 </body>
114 </html>
