1 files changed, 95 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
new file mode 100644
index 0000000000..8bb227c049
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: container-relative units in SVGLength</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 150px;
+  }
+</style>
+<div id=container>
+  <svg id=rootSVGElement>
+    <rect id="rect1" width="10cqw" height="10cqh"/>
+    <rect id="rect2" width="10cqi" height="10cqb"/>
+    <rect id="rect3" width="10cqmin" height="10cqmax"/>
+    <rect id="rect4" width="calc(10cqmin + 10cqmax)" height="calc(10cqw + 3px)"/>
+    <rect id="rect_dynamic"/>
+    <rect id="rect_animated" width="42px" height="42px" fill="green">
+      <animate id=animation attributeName=width from="5cqw" to="10cqw" begin="0s" dur="4s"/>
+    </rect>
+  </svg>
+</div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    container.offsetTop;
+  });
+
+  function cleanup() {
+    rect_dynamic.removeAttribute('width');
+    rect_dynamic.removeAttribute('height');
+  }
+
+  test(() => {
+    assert_equals(rect1.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
+  }, 'unitType with container-relative units');
+
+  test(() => {
+    assert_equals(rect1.width.baseVal.value, 20);
+    assert_equals(rect1.height.baseVal.value, 15);
+  }, 'cqw,cqh can be resolved');
+
+  test(() => {
+    assert_equals(rect2.width.baseVal.value, 20);
+    assert_equals(rect2.height.baseVal.value, 15);
+  }, 'cqi,cqb can be resolved');
+
+  test(() => {
+    assert_equals(rect3.width.baseVal.value, 15);
+    assert_equals(rect3.height.baseVal.value, 20);
+  }, 'cqmin,cqmax can be resolved');
+
+  test(() => {
+    assert_equals(rect4.width.baseVal.value, 35);
+    assert_equals(rect4.height.baseVal.value, 23);
+  }, 'calc() with container-relative units can be resolved');
+
+  test((t) => {
+    t.add_cleanup(cleanup);
+    rect_dynamic.setAttribute('width', '20cqw');
+    rect_dynamic.setAttribute('height', '20cqh');
+    assert_equals(rect_dynamic.width.baseVal.value, 40);
+    assert_equals(rect_dynamic.height.baseVal.value, 30);
+
+    rect_dynamic.width.baseVal.value = 80;
+    rect_dynamic.height.baseVal.value = 45;
+    assert_equals(rect_dynamic.getAttribute('width'), '80');
+    assert_equals(rect_dynamic.getAttribute('height'), '45');
+  }, 'Can modify value with container-relative units');
+
+  smil_async_test((t) => {
+    t.add_cleanup(cleanup);
+    let assert_width = (expected) => {
+      let epsilon = 1.0;
+      return () => {
+        assert_approx_equals(rect_animated.width.animVal.value, expected, epsilon);
+      };
+    };
+    const expectedValues = [
+        // [animationId, time, sampleCallback]
+        ["animation", 0.0,   assert_width(10)],
+        ["animation", 2.0,   assert_width(15)],
+        ["animation", 3.999, assert_width(20)],
+        ["animation", 4,     assert_width(42)],
+    ];
+
+    runAnimationTest(t, expectedValues);
+  });
+
+</script>