css/cssom/computed-style-005.html

<!DOCTYPE html>
<html>
 <head>
  <title>CSS Test: getComputedStyle on blocks with auto margins</title>
  <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
  <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle" />
  <meta name="assert" content="getComputedStyle produces pixel values for margin: auto blocks">
  <script src="/resources/testharness.js" type="text/javascript"></script>
  <script src="/resources/testharnessreport.js" type="text/javascript"></script>
  <style>
    x {
      display: block;
      position: relative;
      background: grey;
      width: 60px;
      height: 10px;
    }
    y {
      display: block;
      background: blue;
      width: 40px;
      height: 10px;
      margin: auto;
    }

    #absolute {
      position: absolute;
      left: 0;
      right: 0;
    }
    #relative {
      position: relative;
    }
  </style>
 </head>
 <body>
 <div id="log"></div>
 <x><y id="absolute"></y></x>
 <x><y id="relative"></y></x>
 <script type="text/javascript">
   let idsToTest = [
     "absolute",
     "relative",
   ];

   for (let id of idsToTest) {
     let elem = document.getElementById(id);
     let elemStyle = window.getComputedStyle(elem);

     // positioned element's auto margins should be resolved to 10px.
     test(function() {
       assert_equals(elemStyle.getPropertyValue("margin-left"), "10px");
       assert_equals(elemStyle.getPropertyValue("margin-right"), "10px");
     }, id + "_computed_margins");

     // positioned element should have a left and right of 0px (as authored).
     test(function() {
       assert_equals(elemStyle.getPropertyValue("left"), "0px");
       assert_equals(elemStyle.getPropertyValue("right"), "0px");
     }, id + "_computed_left_and_right");
   }
 </script>
 </body>
</html>