OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <link href="resources/flexbox.css" rel="stylesheet"> | |
3 <style> | |
4 .horizontal { | |
5 height: 50px; | |
6 background-color: purple; | |
7 position: relative; | |
8 } | |
9 | |
10 .vertical { | |
11 width: 50px; | |
12 height: 10px; | |
13 background-color: purple; | |
14 position: relative; | |
15 -webkit-writing-mode: vertical-rl; | |
16 } | |
17 | |
18 .flex-one { | |
19 background-color: red; | |
20 } | |
21 </style> | |
22 <script src="../../resources/check-layout.js"></script> | |
23 <script> | |
24 function changeHeight() | |
25 { | |
26 document.getElementById('dynamicHorizontalChild').style.height = "90%"; | |
27 document.getElementById('dynamicVerticalChild').style.width = "30%"; | |
28 checkLayout('.flexbox'); | |
29 } | |
30 </script> | |
31 <body onload="changeHeight()"> | |
32 <div class="flexbox horizontal"> | |
33 <div data-expected-height="50" class="flex-one"> | |
34 <div data-expected-height="35" style="height: 70%; background-color: lime"><
/div> | |
35 </div> | |
36 </div> | |
37 | |
38 <div class="flexbox horizontal"> | |
39 <div data-expected-height="50" class="flex-one"> | |
40 <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70
%; background-color: lime"></div> | |
41 </div> | |
42 </div> | |
43 | |
44 <div class="flexbox horizontal"> | |
45 <div data-expected-height="50" class="flex-one" style="padding: 10px; border:
2px solid black"> | |
46 <div data-expected-height="18" style="height: 70%; background-color: lime"><
/div> | |
47 </div> | |
48 </div> | |
49 | |
50 <div class="flexbox horizontal"> | |
51 <img data-expected-height="25" style="max-height: 50%" src="../images/resource
s/green-10.png" /> | |
52 </div> | |
53 | |
54 <div class="flexbox horizontal"> | |
55 <div data-expected-height="25" class="flex-one" style="max-height:50%"> | |
56 <div data-expected-height="13" style="height: 50%; background-color: lime"><
/div> | |
57 </div> | |
58 </div> | |
59 | |
60 <div class="flexbox wrap align-content-flex-start" style="width: 100px; height:
100px; background-color: yellow; padding: 3px;"> | |
61 <div data-expected-height="30" style="min-height: 30%; width: 80px; background
-color: purple; margin: 2px; "> | |
62 <div data-expected-height="15" style="background-color: red; height: 50%; wi
dth: 20px;"></div> | |
63 </div> | |
64 <div data-expected-height="40" style="height: 40px; width: 80px; background-co
lor: green; margin: 2px;"></div> | |
65 </div> | |
66 | |
67 <div class="flexbox vertical"> | |
68 <div data-expected-width="50" class="flex-one"> | |
69 <div data-expected-width="25" style="width: 50%; background-color: lime"></d
iv> | |
70 </div> | |
71 </div> | |
72 | |
73 <div class="flexbox vertical"> | |
74 <div data-expected-width="50" class="flex-one"> | |
75 <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; b
ackground-color: lime"></div> | |
76 </div> | |
77 </div> | |
78 | |
79 <div class="flexbox vertical"> | |
80 <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2
px solid black"> | |
81 <div data-expected-width="13" style="width: 50%; background-color: lime"></d
iv> | |
82 </div> | |
83 </div> | |
84 | |
85 <div class="flexbox vertical"> | |
86 <img data-expected-width="25" style="max-width: 50%" src="../images/resources/
green-10.png" /> | |
87 </div> | |
88 | |
89 <div class="flexbox vertical"> | |
90 <div data-expected-width="25" class="flex-one" style="max-width: 50%"> | |
91 <div data-expected-width="13" style="width: 50%; background-color: lime"></d
iv> | |
92 </div> | |
93 </div> | |
94 </body> | |
OLD | NEW |