layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html@b8a032363ba2
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html
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 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <html>
7 <head>
8 <title>CSS Reftest Reference</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <style>
11 .flexContainer {
12 background: purple;
13 display: flex;
14 flex-wrap: wrap;
15 align-content: space-around;
16 width: 70px;
17 height: 70px;
18 float: left;
19 margin-right: 5px;
20 }
21 .bigItem {
22 background: blue;
23 flex: none; /* prevent shrinking (so we can intentionally overflow) */
24 width: 72px;
25 height: 20px;
26 }
27 .smallItem {
28 background: teal;
29 width: 20px;
30 height: 20px;
31 }
32 .hidden > .bigItem {
33 /* To match the testcase's "overflow:hidden"-cropped flex item, we
34 just use a smaller width that exactly fits our container (and
35 doesn't overflow). */
36 width: 70px;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="flexContainer"><!-- (overflow un-set) -->
42 <div class="bigItem"></div>
43 <div class="smallItem"></div>
44 </div>
45 <div class="flexContainer hidden">
46 <div class="bigItem"></div>
47 <div class="smallItem"></div>
48 </div>
49 </body>
50 </html>
