auto margins on flexbox should allocate space in the cross direction
[WebKit-https.git] / LayoutTests / css3 / flexbox / auto-margins.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5
6 #circles, #circles div {
7     display: -webkit-flex;
8     width: -webkit-calc(100% - 4em);
9     height: -webkit-calc(100% - 4em);
10     border: 1em solid blue;
11     border-radius:50%;
12     margin: auto;
13 }
14
15 #circles { width:9em; height:9em; }
16
17 </style>
18 </head>
19 <body>
20 <p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
21
22 <p>The word OK should be centered vertically and horizontally.</p>
23 <div style="display: -webkit-flex; width: 4em; height: 4em; background: silver">
24   <p id="ok" style="margin: auto">OK</p>
25 </div>
26
27 <div style="display: -webkit-flex; width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl">
28   <p id="okVertical" style="margin: auto">OK</p>
29 </div>
30
31 <p>You should see 3 blue concentric circles.</p>
32 <div id="circles"><div><div></div></div></div>
33
34 <p id="log">The computed style of each margin should not be 0.</p>
35 <script>
36 var okStyle = getComputedStyle(document.getElementById('ok'));
37 document.getElementById("log").innerHTML += "<br>OK: " + 
38     ((parseInt(okStyle.marginTop) && parseInt(okStyle.marginRight) && parseInt(okStyle.marginBottom) && parseInt(okStyle.marginLeft)) ? "PASS" : "FAIL");
39
40 var okVerticalStyle = getComputedStyle(document.getElementById('okVertical'));
41 document.getElementById("log").innerHTML += "<br>Vertical OK: " + 
42     ((parseInt(okVerticalStyle.marginTop) && parseInt(okVerticalStyle.marginRight) && parseInt(okVerticalStyle.marginBottom) && parseInt(okVerticalStyle.marginLeft)) ? "PASS" : "FAIL");
43 </script>
44 </body>
45 </html>