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