Bug 1769509 [wpt PR 34068] - [@container] Handle container-relative units in SVGLength, a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Mon, 23 May 2022 10:02:54 +0000
changeset 618675 d04c234c5441e5dc3e65869d6ce34159a2b8b35d
parent 618674 a09f2eeb72ecb12d32614ff819a6bff4334acd38
child 618676 ac188e62cb654955e622b8bf6b1161157cdf0ea4
push id163376
push userwptsync@mozilla.com
push dateTue, 24 May 2022 10:19:51 +0000
treeherderautoland@2ef7c238533c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1769509, 34068, 1313083, 1223030, 3645271, 1005189
milestone102.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 1769509 [wpt PR 34068] - [@container] Handle container-relative units in SVGLength, a=testonly Automatic update from web-platform-tests [@container] Handle container-relative units in SVGLength Pass SVGLengthContext's element as the context for resolving container- relative units. The conversion logic for container-relative units is too complicated to replicate in svg_length_context.cc, so we instead lean on SVGLengthContext::ResolveValue to carry out the conversion if such units are involved. Fixed: 1313083 Bug: 1223030 Change-Id: I40cbc2854b566943e9d531ad749171b4dfc901f0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3645271 Reviewed-by: Fredrik Söderquist <fs@opera.com> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1005189} -- wpt-commits: 6511933860960fdcf2b15449cea711262405b23b wpt-pr: 34068
testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
new file mode 100644
--- /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>