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