layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-1.xhtml@141e0f1194b1
layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-1.xhtml
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
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 flex items containing overlapping content, to test
7 their paint-order. -->
8 <html xmlns="http://www.w3.org/1999/xhtml">
9 <head>
10 <title>CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the container</title>
11 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
12 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#painting"/>
13 <link rel="match" href="flexbox-paint-ordering-1-ref.xhtml"/>
14 <style>
15 body {
16 line-height: 0;
17 }
18 .container {
19 width: 40px;
20 height: 14px;
21 border: 2px solid green;
22 margin-bottom: 2px;
23 }
24 .a {
25 width: 16px;
26 height: 10px;
27 background: blue;
28 min-width: 0;
29 border: 2px solid lightblue;
30 }
31 .b {
32 width: 16px;
33 height: 10px;
34 background: purple;
35 min-width: 0;
36 border: 2px solid slateblue;
37 }
38 .aKid {
39 margin-left: 10px;
40 margin-top: 2px;
41 width: 16px;
42 height: 6px;
43 background: yellow;
44 border: 1px solid black;
45 }
46 </style>
47 </head>
48 <body>
49 <!-- inline-level flex container -->
50 <div class="container" style="display: inline-flex">
51 <div class="a"><div class="aKid"/></div>
52 <div class="b"></div>
53 </div>
55 <!-- block-level flex container -->
56 <div class="container" style="display: flex">
57 <div class="a"><div class="aKid"/></div>
58 <div class="b"></div>
59 </div>
61 <!-- floated flex container -->
62 <div class="container" style="display: flex; float: left">
63 <div class="a"><div class="aKid"/></div>
64 <div class="b"></div>
65 </div>
66 <!-- Helper-div to clear floats: -->
67 <div style="clear: both"/>
69 <!-- relatively-positioned flex container -->
70 <div class="container" style="display: flex; position: relative">
71 <div class="a"><div class="aKid"/></div>
72 <div class="b"></div>
73 </div>
75 <!-- absolutely-positioned flex container -->
76 <div class="container" style="display: flex; position: absolute">
77 <div class="a"><div class="aKid"/></div>
78 <div class="b"></div>
79 </div>
80 <!--- Spacer div, since abspos div doesn't set aside space for itself -->
81 <div style="height: 20px"/>
83 <!-- fixed-position flex container -->
84 <div class="container" style="display: flex; position: fixed">
85 <div class="a"><div class="aKid"/></div>
86 <div class="b"></div>
87 </div>
89 </body>
90 </html>
