ResizeObserver for SVG elements with CSS layout boxes use the layout …

…boxes. As per the CSSWG resolution here: w3c/csswg-drafts#4032 Previously, any and all SVG elements used its SVG object bounding box. Now, SVG elements that have their own CSS layout box use them. These match the following CSS rules: `svg:root, *:not(svg|*) > svg, svg|foreignObject > svg` Differential Revision: https://phabricator.services.mozilla.com/D154246 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1565557 gecko-commit: 742e5698d74fd51b30049622b9beaf963e8cefc0 gecko-reviewers: emilio
web-platform-tests · Aug 11, 2022 · 566b8af · 566b8af
1 parent 5aa1e80
commit 566b8af
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 0 deletions.
diff --git a/resize-observer/svg-with-css-box-001.html b/resize-observer/svg-with-css-box-001.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<title>ResizeObserver for SVG elements with CSS box.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/resizeTestHelper.js"></script>
+<div id="container" style="width: 500px; height: 500px;">
+<svg id="svg" width="100%" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" style="fill:orange;stroke:black;stroke-width:1" />
+  <foreignObject id="foreign" x="0" y="0" width="100" height="100">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100%" height="100%"
+         viewBox="0 0 100 100"
+         id="foreign-svg">
+      <circle cx="50" cy="50" r="45" style="fill:orange;stroke:black;stroke-width:1" />
+    </svg>
+  </foreignObject>
+</svg>
+<script>
+'use strict';
+
+function test0() {
+  let targetWidth = 150;
+  let target = document.getElementById('foreign-svg');
+  let container = document.getElementById('foreign');
+  let helper = new ResizeTestHelper(
+    "test0: observe `foreignObject` SVG in HTML document",
+  [
+    {
+      setup: observer => {
+        observer.observe(target);
+      },
+      notify: (entries, observer) => {
+        return true; // Delay next step
+      }
+    },
+    {
+      setup: observer => {
+        target.setAttribute('width', targetWidth);
+      },
+      notify: entries => {
+        assert_equals(entries.length, 1);
+        const entry = entries[0];
+        assert_equals(entry.target, target);
+        assert_equals(entry.contentBoxSize[0].inlineSize, targetWidth);
+      },
+    }
+  ]);
+  return helper.start();
+}
+
+function test1() {
+  let targetWidth = 400;
+  let target = document.getElementById('svg');
+  let container = document.getElementById('container');
+  let helper = new ResizeTestHelper(
+    "test1: observe inline SVG in HTML",
+  [
+    {
+      setup: observer => {
+        observer.observe(target);
+      },
+      notify: (entries, observer) => {
+        return true; // Delay next step
+      }
+    },
+    {
+      setup: observer => {
+        target.style.width = targetWidth + 'px';
+      },
+      notify: (entries, observer) => {
+        assert_equals(entries.length, 1);
+        const entry = entries[0];
+        assert_equals(entry.target, target);
+        assert_equals(entry.contentBoxSize[0].inlineSize, targetWidth);
+      }
+    }
+  ]);
+  return helper.start();
+}
+
+let guard;
+test(_ => {
+  assert_implements(window.ResizeObserver);
+  guard = async_test('guard');
+}, "ResizeObserver implemented")
+
+test0()
+  .then(() => { test1(); })
+  .then(() => { guard.done(); });
+
+</script>
diff --git a/resize-observer/svg-with-css-box-002.svg b/resize-observer/svg-with-css-box-002.svg