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>A black box 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; font-family: Ahem;">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; font-family: Ahem;">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>