Bug 1298008 Part 4: Add a web-platform test of getBoxQuads on block and flex boxes with auto margins. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Wed, 28 Mar 2018 14:46:11 -0700
changeset 776460 c37ba131291e3bc58bc64a5d188a45f28da58f05
parent 776459 3dd522fee1eaf538a0c736d0babc074a0b5508ed
child 776461 3b3b14692cc451d37e33ef468871dbc26604f349
push id104888
push userbmo:emilio@crisal.io
push dateTue, 03 Apr 2018 07:00:14 +0000
reviewersdholbert
bugs1298008
milestone61.0a1
Bug 1298008 Part 4: Add a web-platform test of getBoxQuads on block and flex boxes with auto margins. r=dholbert MozReview-Commit-ID: Hrw3rt1Lohq
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/cssom-view/cssom-getBoxQuads-001.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -317670,16 +317670,22 @@
     ]
    ],
    "css/cssom-view/cssom-getBoundingClientRect-002.html": [
     [
      "/css/cssom-view/cssom-getBoundingClientRect-002.html",
      {}
     ]
    ],
+   "css/cssom-view/cssom-getBoxQuads-001.html": [
+    [
+     "/css/cssom-view/cssom-getBoxQuads-001.html",
+     {}
+    ]
+   ],
    "css/cssom-view/cssom-getClientRects-002.html": [
     [
      "/css/cssom-view/cssom-getClientRects-002.html",
      {}
     ]
    ],
    "css/cssom-view/cssom-getClientRects.html": [
     [
@@ -531061,16 +531067,20 @@
   "css/cssom-view/cssom-getBoundingClientRect-001.html": [
    "7118495560adadebcca98e6add47a74669f87788",
    "testharness"
   ],
   "css/cssom-view/cssom-getBoundingClientRect-002.html": [
    "8dfaa313b4abad30281d07ce22ac06a61754cc06",
    "testharness"
   ],
+  "css/cssom-view/cssom-getBoxQuads-001.html": [
+   "6236946f2eb29b2fdb3e7b3c1152ef275d921759",
+   "testharness"
+  ],
   "css/cssom-view/cssom-getClientRects-002.html": [
    "da348da01e09474f652ff1dfb6869665740668d5",
    "testharness"
   ],
   "css/cssom-view/cssom-getClientRects.html": [
    "f4e750bc1267f5c519a513ef1f25bf3660365788",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom-view/cssom-getBoxQuads-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSSOM View - getBoxQuads() returns proper border and margin boxes for block and flex</title>
+  <link rel="help" href="https://drafts.csswg.org/cssom-view/#the-geometryutils-interface">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+    .container {
+      width: 100px;
+      height: 50px;
+      background-color: gray;
+    }
+    span {
+      display: block;
+      background: gold;
+      height: 4px;
+      width: 14px;
+      margin: auto;
+      padding: 0px;
+      border: 3px solid blue;
+    }
+  </style>
+ </head>
+ <body>
+  <div class="container">
+  <span id="block-block"></span>
+  </div>
+
+  <div class="container" style="display:flex">
+  <span id="flex-block"></span>
+  </div>
+
+  <script>
+    test(function() {
+      let bb = document.getElementById("block-block");
+      assert_equals(bb.getBoxQuads({box: "border"})[0].bounds.width,  20, "Block layout border box is expected width.");
+      assert_equals(bb.getBoxQuads({box: "margin"})[0].bounds.width, 100, "Block layout margin box is expected width.");
+
+      // For containers that expand items to fill block-axis space, measure the box heights also.
+      let fb = document.getElementById("flex-block");
+      assert_equals(fb.getBoxQuads({box: "border"})[0].bounds.width,  20, "Flex layout border box is expected width.");
+      assert_equals(fb.getBoxQuads({box: "margin"})[0].bounds.width, 100, "Flex layout margin box is expected width.");
+
+      assert_equals(fb.getBoxQuads({box: "border"})[0].bounds.height, 10, "Flex layout border box is expected height.");
+      assert_equals(fb.getBoxQuads({box: "margin"})[0].bounds.height, 50, "Flex layout margin box is expected height.");
+    });
+  </script>
+ </body>
+</html>