Bug 1545239 - Add tests for border-box and different writing modes. r=dholbert
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 08 May 2019 21:27:55 +0000
changeset 473156 b34ea6abce97b002de66d2d0376b84e347f3151a
parent 473155 01338a1e26b7d838ddd591fca9a7495e338c6c96
child 473157 a0c91ab4d3477cdb041c00dee13354cafafb83fd
push id113065
push useropoprus@mozilla.com
push dateThu, 09 May 2019 03:46:59 +0000
treeherdermozilla-inbound@34a824c75b7b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1545239
milestone68.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 1545239 - Add tests for border-box and different writing modes. r=dholbert 1. Add new tests with an extra argument of "content-box"/"border-box" in observe(), and test contectBoxSize and borderBoxSize. 2. Add a new test for changing the writing mode. Changing writing mode makes the element change the orientation, but the logical box size is still the same, so we shouldn't fire the event. Differential Revision: https://phabricator.services.mozilla.com/D28739
testing/web-platform/tests/resize-observer/observe.html
--- a/testing/web-platform/tests/resize-observer/observe.html
+++ b/testing/web-platform/tests/resize-observer/observe.html
@@ -223,25 +223,368 @@ function test7() {
 
   ro.observe(t);
 
   return new Promise( (resolve, reject) => {
     resolvePromise = resolve;
   });
 }
 
+function test8() {
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+  t.style.height = "100px";
+
+  let helper = new ResizeTestHelper(
+    "test8: simple content-box observation",
+  [
+    {
+      setup: observer => {
+        observer.observe(t, { box: "content-box" });
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 100, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentRect.top, 0, "target top padding");
+        assert_equals(entries[0].contentRect.left, 0, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 100,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 100,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 100,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.width = "90px";
+        t.style.height = "90px";
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 90, "target width");
+        assert_equals(entries[0].contentRect.height, 90, "target height");
+        assert_equals(entries[0].contentRect.top, 0, "target top padding");
+        assert_equals(entries[0].contentRect.left, 0, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 90,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 90,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 90,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 90,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.padding = "5px";
+      },
+      notify: entries => {
+        assert_unreached("the 'content-box' ResizeObserver shouldn't fire " +
+                         "for restyles that don't affect the content-box size");
+      },
+      timeout: () => {
+        // expected
+        // Note: the border-box size is 100px x 100px right now.
+      }
+    }
+  ]);
+  return helper.start(() => t.remove());
+}
+
+function test9() {
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+  t.style.height = "100px";
+
+  let helper = new ResizeTestHelper(
+    "test9: simple content-box observation but keep border-box size unchanged",
+  [
+    {
+      setup: observer => {
+        observer.observe(t, { box: "content-box" });
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 100, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentRect.top, 0, "target top padding");
+        assert_equals(entries[0].contentRect.left, 0, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 100,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 100,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 100,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        // Keep the border-box size the same, and change the content-box size.
+        t.style.width = "92px";
+        t.style.height = "92px";
+        t.style.padding = "4px";
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 92, "target width");
+        assert_equals(entries[0].contentRect.height, 92, "target height");
+        assert_equals(entries[0].contentRect.top, 4, "target top padding");
+        assert_equals(entries[0].contentRect.left, 4, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 92,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 92,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 100,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 100,
+                      "target border-box block size");
+      }
+    }
+  ]);
+  return helper.start(() => t.remove());
+}
+
+function test10() {
+  let t = createAndAppendElement("div");
+  t.style.width = "100px";
+  t.style.height = "100px";
+
+  let helper = new ResizeTestHelper(
+    "test10: simple border-box observation",
+  [
+    {
+      setup: observer => {
+        observer.observe(t, { box: "border-box" });
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 100, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentRect.top, 0, "target top padding");
+        assert_equals(entries[0].contentRect.left, 0, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 100,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 100,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 100,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.padding = "4px";
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 100, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentRect.top, 4, "target top padding");
+        assert_equals(entries[0].contentRect.left, 4, "target left padding");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 100,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 108,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 108,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.width = "104px";
+        t.style.height = "104px";
+        t.style.padding = "2px";
+      },
+      notify: entries => {
+        assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
+                         "for restyles that don't affect the border-box size");
+      },
+      timeout: () => {
+        // expected: 104 + 2 * 2 = 108. The border-box size is the same.
+      }
+    }
+  ]);
+  return helper.start(() => t.remove());
+}
+
+function test11() {
+  let wrapper = createAndAppendElement("div");
+  wrapper.style.width = "100px";
+  wrapper.style.height = "100px";
+  wrapper.style.writingMode = "vertical-rl";
+  let t = createAndAppendElement("div", wrapper);
+  t.style.inlineSize = "50px";
+  t.style.blockSize = "50px";
+
+  let helper = new ResizeTestHelper(
+    "test11: simple observation with vertical writing mode",
+  [
+    {
+      setup: observer => {
+        observer.observe(t);
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 50, "target width");
+        assert_equals(entries[0].contentRect.height, 50, "target height");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 50,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 50,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 50,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 50,
+                      "target border-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.blockSize = "75px";
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 75, "target width");
+        assert_equals(entries[0].contentRect.height, 50, "target height");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 50,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 75,
+                      "target content-box block size");
+        assert_equals(entries[0].borderBoxSize.inlineSize, 50,
+                      "target border-box inline size");
+        assert_equals(entries[0].borderBoxSize.blockSize, 75,
+                      "target border-box block size");
+      }
+    }
+  ]);
+
+  return helper.start(() => {
+    t.remove();
+    wrapper.remove();
+  });
+}
+
+function test12() {
+  let t = createAndAppendElement("div");
+  t.style.writingMode = "vertical-lr";
+  t.style.inlineSize = "100px";
+  t.style.blockSize = "50px";
+
+  let helper = new ResizeTestHelper(
+    "test12: no observation is fired after the change of writing mode when " +
+    "box's specified size comes from logical size properties.",
+  [
+    {
+      setup: observer => {
+        observer.observe(t);
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 50, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 50,
+                      "target content-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.writingMode = "horizontal-tb";
+      },
+      notify: entries => {
+        assert_unreached("the logical size of content-box doesn't change");
+      },
+      timeout: () => {
+        // expected: We don't change the logical size of content-box.
+      }
+    }
+  ]);
+
+  return helper.start(() => t.remove());
+}
+
+function test13() {
+  let t = createAndAppendElement("div");
+  t.style.writingMode = "vertical-lr";
+  t.style.height = "100px";
+  t.style.width = "50px";
+
+  let helper = new ResizeTestHelper(
+    "test13: an observation is fired after the change of writing mode when " +
+    "box's specified size comes from physical size properties.",
+  [
+    {
+      setup: observer => {
+        observer.observe(t);
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 50, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 100,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 50,
+                      "target content-box block size");
+      }
+    },
+    {
+      setup: observer => {
+        t.style.writingMode = "horizontal-tb";
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1, "1 pending notification");
+        assert_equals(entries[0].target, t, "target is t");
+        assert_equals(entries[0].contentRect.width, 50, "target width");
+        assert_equals(entries[0].contentRect.height, 100, "target height");
+        assert_equals(entries[0].contentBoxSize.inlineSize, 50,
+                      "target content-box inline size");
+        assert_equals(entries[0].contentBoxSize.blockSize, 100,
+                      "target content-box block size");
+      },
+    }
+  ]);
+
+  return helper.start(() => t.remove());
+}
+
 let guard;
 test(_ => {
   assert_own_property(window, "ResizeObserver");
   guard = async_test('guard');
 }, "ResizeObserver implemented")
 
 test0()
   .then(() => test1())
   .then(() => test2())
   .then(() => test3())
   .then(() => test4())
   .then(() => test5())
   .then(() => test6())
   .then(() => test7())
+  .then(() => test8())
+  .then(() => test9())
+  .then(() => test10())
+  .then(() => test11())
+  .then(() => test12())
+  .then(() => test13())
   .then(() => guard.done());
 
 </script>