layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-1.html@925c144e1f1f
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-1.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
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 Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#algo-visibility">
11 <link rel="match" href="flexbox-collapsed-item-baseline-1-ref.html">
12 <meta charset="utf-8">
13 <style>
14 .flexContainer {
15 display: flex;
16 width: 50px;
17 background: yellow;
18 border: 1px dotted black;
19 margin: 5px;
20 align-items: baseline;
21 }
22 .collapse {
23 visibility: collapse;
24 }
25 .largeFont {
26 font-size: 20px;
27 background: lightblue;
28 /* Our flex items get padding on opposite sides (top/bottom) so that they
29 produce a large combined height when baseline-aligned: */
30 padding-top: 5px;
31 }
32 .smallFont {
33 font-size: 10px;
34 background: pink;
35 /* Our flex items get padding on opposite sides (top/bottom) so that they
36 produce a large combined height when baseline-aligned: */
37 padding-bottom: 20px;
38 }
39 </style>
40 </head>
41 <body>
42 <!-- Second item collapsed: -->
43 <div class="flexContainer">
44 <div class="largeFont">a</div>
45 <div class="smallFont collapse">b</div>
46 </div>
48 <!-- First item collapsed: -->
49 <div class="flexContainer">
50 <div class="largeFont collapse">a</div>
51 <div class="smallFont">b</div>
52 </div>
53 </body>
54 </html>
