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 411386 c37ba131291e3bc58bc64a5d188a45f28da58f05
parent 411385 3dd522fee1eaf538a0c736d0babc074a0b5508ed
child 411387 3b3b14692cc451d37e33ef468871dbc26604f349
push id101643
push userdluca@mozilla.com
push dateTue, 03 Apr 2018 04:25:27 +0000
treeherdermozilla-inbound@ac667545d8aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1298008
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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>