layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-3.html@44a2da4a2ab2
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-3.html
Fri, 16 Jan 2015 04:50:19 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 04:50:19 +0100
- branch
- TOR_BUG_9701
- changeset 13
- 44a2da4a2ab2
- permissions
- -rw-r--r--
Replace accessor implementation with direct member state manipulation, by
request https://trac.torproject.org/projects/tor/ticket/9701#comment:32
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 strut formation (from visibility:collapse) happens *after* lines have been stretched</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-horiz-3-ref.html">
12 <meta charset="utf-8">
13 <style>
14 .flexContainer {
15 display: flex;
16 flex-wrap: wrap;
17 align-content: stretch; /* Initial value; just here for emphasis */
18 width: 25px;
19 height: 60px;
20 background: yellow;
21 border: 1px dotted black;
22 float: left;
23 margin: 5px;
24 }
25 .collapsedItem {
26 visibility: collapse;
27 width: 10px;
28 }
29 .shortItem {
30 width: 25px;
31 height: 10px;
32 background: purple;
33 }
34 .tallItem {
35 width: 10px;
36 height: 30px;
37 background: olive;
38 }
39 </style>
40 </head>
41 <body>
42 <!-- In this testcase, the first flex line initially has a cross-size of
43 10px, and the second flex line has a cross-size of 30px. Both lines are
44 stretched by 10px each (to hit the container's total cross-size, 60px).
45 Then, we handle "visibility:collapse" and convert the collapsed item
46 into a strut with the second line's stretched cross-size (40px), and we
47 restart flex layout. This strut then ends up in the *first* line (since
48 it has 0 main-size), which means both flex lines end up being 40px tall.
49 -->
50 <div class="flexContainer">
51 <div class="shortItem"></div>
52 <div class="collapsedItem"></div>
53 <div class="tallItem"></div>
54 </div>
55 </body>
56 </html>
