Part 2: Add a web-platform-test to check computed margin values on au…

…to margin blocks. bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1471894 gecko-commit: 16989caa105538b382160c13cad8f1df0b41438d gecko-integration-branch: autoland gecko-reviewers: dholbert
web-platform-tests · Jul 25, 2018 · 60ec4ae · 60ec4ae
1 parent 29663d0
commit 60ec4ae
Showing 1 changed file with 66 additions and 0 deletions.
diff --git a/css/cssom/computed-style-005.html b/css/cssom/computed-style-005.html
@@ -0,0 +1,66 @@
+<!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);
+
+     test(function() {
+       assert_equals(elemStyle.getPropertyValue("margin-left"), "10px");
+       assert_equals(elemStyle.getPropertyValue("margin-right"), "10px");
+     }, id + "_computed_margins", {
+       assert: id + "-positioned element's auto margins should be resolved to 10px."
+     });
+
+     test(function() {
+       assert_equals(elemStyle.getPropertyValue("left"), "0px");
+       assert_equals(elemStyle.getPropertyValue("right"), "0px");
+     }, id + "_computed_left_and_right", {
+       assert: id + "-positioned element should have a left and right of 0px (as authored)."
+     });
+   }
+ </script>
+ </body>
+</html>