OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/flexbox.css" rel="stylesheet"> | |
4 <style> | |
5 .inline-flexbox { | |
6 background-color: #aaa; | |
7 position: relative; | |
8 } | |
9 | |
10 .writing-mode-vertical { | |
11 -webkit-writing-mode: vertical-lr; | |
tony
2014/07/21 17:50:59
I would use vertical-rl instead. Neither are very
harpreet.sk
2014/07/22 10:10:23
Done.
| |
12 } | |
13 .inline-flexbox > * { | |
14 flex: none; | |
15 } | |
16 .inline-flexbox :nth-child(1) { | |
17 background-color: lightblue; | |
18 } | |
19 .inline-flexbox :nth-child(2) { | |
20 background-color: lightgreen; | |
21 } | |
22 .inline-flexbox :nth-child(3) { | |
23 background-color: pink; | |
24 } | |
25 .inline-flexbox :nth-child(4) { | |
26 background-color: yellow; | |
27 } | |
28 </style> | |
29 <script src="../../resources/check-layout.js"></script> | |
30 <body onload="checkLayout('.inline-flexbox');"> | |
31 <div class="inline-flexbox column align-content-flex-start wrap" data-expected-w idth="100"> | |
tony
2014/07/21 17:50:59
I think all the flexboxes should have a expected-h
harpreet.sk
2014/07/22 10:10:23
Done.
| |
32 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
tony
2014/07/21 17:50:59
Looks like all the flex items have a width of 100p
harpreet.sk
2014/07/22 10:10:23
Done.
| |
33 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div> | |
34 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30">< /div> | |
35 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40">< /div> | |
36 </div> | |
37 | |
38 <div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="200"> | |
39 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
40 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div> | |
41 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div> | |
42 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10" ></div> | |
43 </div> | |
44 | |
45 <div style="width: 300px; height:100px"> | |
tony
2014/07/21 17:50:58
What is the height here for?
harpreet.sk
2014/07/22 10:10:23
No use of height so removed.
| |
46 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%" data-expected-width="150"> | |
47 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
48 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div> | |
49 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30">< /div> | |
50 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40">< /div> | |
51 </div> | |
52 </div> | |
53 | |
54 <div style="width: 300px; height:100px"> | |
tony
2014/07/21 17:50:59
What is the height here for?
harpreet.sk
2014/07/22 10:10:23
No use of height so removed.
| |
55 <div class="inline-flexbox column align-content-flex-start wrap" style="width: 5 0%; height: 35px;" data-expected-width="150"> | |
56 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
57 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div> | |
58 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div> | |
59 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10" ></div> | |
60 </div> | |
61 </div> | |
62 | |
63 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" data-expected-height="20"> | |
64 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
65 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div> | |
66 <div style="width: 100px; height: 10px" data-offset-x="200" data-offset-y="0"> </div> | |
67 <div style="width: 100px; height: 20px" data-offset-x="300" data-offset-y="0"> </div> | |
68 </div> | |
69 | |
70 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" style="width: 200px" data-expected-height="40"> | |
71 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></ div> | |
72 <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"> </div> | |
73 <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20">< /div> | |
74 <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="20" ></div> | |
75 </div> | |
76 | |
77 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" data-expected-height="20"> | |
78 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="0" data-offset-y="0"></div> | |
79 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="100" data-offset-y="0"></div> | |
80 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="200" data-offset-y="0"></div> | |
81 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="300" data-offset-y="0"></div> | |
82 </div> | |
83 | |
84 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-ver tical" style="width: 200px" data-expected-height="40"> | |
85 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="0" data-offset-y="0"></div> | |
86 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="100" data-offset-y="0"></div> | |
87 <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-off set-x="0" data-offset-y="20"></div> | |
88 <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-off set-x="100" data-offset-y="20"></div> | |
89 </div> | |
90 </body> | |
91 </html> | |
OLD | NEW |