layout/reftests/flexbox/flexbox-position-absolute-2.xhtml@deefc01c0e14
layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
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 <!--
7 Testcase with absolutely positioned children of a flex container.
8 In this testcase, we simply specify "position: absolute" without
9 actually doing any positioning, to test the "static position" of these
10 children.
11 -->
12 <html xmlns="http://www.w3.org/1999/xhtml">
13 <head>
14 <style>
15 div.containingBlock {
16 top: 15px;
17 left: 20px;
18 height: 400px;
19 position: absolute;
20 border: 2px dashed purple;
21 }
22 .abspos {
23 position: absolute;
24 border: 2px dotted black;
25 }
26 div.flexbox {
27 width: 200px;
28 height: 100px;
29 display: flex;
30 }
31 div.a {
32 flex: 1 0 auto;
33 width: 30px;
34 height: 100px;
35 background: lightgreen;
36 }
37 div.b {
38 flex: 2 0 auto;
39 width: 20px;
40 height: 100px;
41 background: yellow;
42 }
43 div.inflex {
44 flex: none;
45 width: 20px;
46 height: 100px;
47 background: gray;
48 }
49 div.noFlexFn {
50 width: 15px;
51 height: 15px;
52 background: teal;
53 }
54 </style>
55 </head>
56 <body>
57 <div class="containingBlock">
58 <!-- First child abspos: -->
59 <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
60 <!-- Second child abspos: -->
61 <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
62 <!-- Middle child abspos: -->
63 <div class="flexbox"
64 ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
65 <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
66 <div class="flexbox" style="justify-content: space-around"
67 ><div class="inflex"/><div class="inflex"/><div class="inflex"
68 /><div class="noFlexFn abspos"/><div class="inflex"/></div>
69 </div>
70 </body>
71 </html>
