OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 .flexbox-horizontal { | |
cbiesinger
2014/06/24 03:01:28
I'd really prefer you to use the stylesheet in css
harpreet.sk
2014/06/24 07:56:59
Now using flexbox.css
| |
4 display: flex; | |
5 height: 100px; | |
6 background-color: purple; | |
7 position: relative; | |
8 } | |
9 | |
10 .flexbox-vertical { | |
11 display: flex; | |
12 width: 100px; | |
13 background-color: purple; | |
14 position: relative; | |
15 -webkit-writing-mode: vertical-rl; | |
16 } | |
17 | |
18 .flex-item { | |
19 flex: 1; | |
20 background-color: red; | |
21 } | |
22 </style> | |
23 <script src="../../resources/check-layout.js"></script> | |
24 <script> | |
25 function changeHeight() | |
26 { | |
27 document.getElementById('dynamicHorizontalChild').style.height = "90%"; | |
28 document.getElementById('dynamicVerticalChild').style.width = "30%"; | |
29 checkLayout('.flexbox-horizontal'); | |
30 checkLayout('.flexbox-vertical'); | |
31 } | |
32 </script> | |
33 <body onload="changeHeight()"> | |
34 <div class="flexbox-horizontal"> | |
35 <div data-expected-height="100" class="flex-item"> | |
36 <div data-expected-height="70" style="height:70%; background-color:lime">Hor izontal Writing Mode</div> | |
37 </div> | |
38 </div> | |
39 | |
40 <div class="flexbox-vertical"> | |
41 <div data-expected-width="100" class="flex-item"> | |
42 <div data-expected-width="50" style="width: 50%; background-color:lime">Vert ical Writing Mode</div> | |
43 </div> | |
44 </div> | |
45 | |
46 <div class="flexbox-horizontal"> | |
47 <div data-expected-height="100" class="flex-item"> | |
48 <div id="dynamicHorizontalChild" data-expected-height="90" style="height:70% ; background-color:lime">Horizontal Writing Mode</div> | |
49 </div> | |
50 </div> | |
51 | |
52 <div class="flexbox-vertical"> | |
53 <div data-expected-width="100" class="flex-item"> | |
54 <div id="dynamicVerticalChild" data-expected-width="30" style="width: 50%; b ackground-color:lime">Vertical Writing Mode</div> | |
55 </div> | |
56 </div> | |
57 | |
58 <div class="flexbox-horizontal"> | |
59 <div data-expected-height="100" class="flex-item" style="padding:10px; border: 2px solid black"> | |
60 <div data-expected-height="53" style="height:70%; background-color:lime">Hor izontal Writing Mode</div> | |
61 </div> | |
62 </div> | |
63 | |
64 <div class="flexbox-vertical"> | |
65 <div data-expected-width="100" class="flex-item" style="padding:10px; border:2 px solid black"> | |
66 <div data-expected-width="38" style="width: 50%; background-color:lime">Vert ical Writing Mode</div> | |
67 </div> | |
68 </div> | |
69 </body> | |
OLD | NEW |