| author | Anders Hartvoll Ruud <andruud@chromium.org> |
| Mon, 23 May 2022 10:02:54 +0000 | |
| changeset 618675 | d04c234c5441e5dc3e65869d6ce34159a2b8b35d |
| parent 618674 | a09f2eeb72ecb12d32614ff819a6bff4334acd38 |
| child 618676 | ac188e62cb654955e622b8bf6b1161157cdf0ea4 |
| push id | 163376 |
| push user | wptsync@mozilla.com |
| push date | Tue, 24 May 2022 10:19:51 +0000 |
| treeherder | autoland@2ef7c238533c [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | testonly |
| bugs | 1769509, 34068, 1313083, 1223030, 3645271, 1005189 |
| milestone | 102.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
|
| testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html | file | annotate | diff | comparison | revisions |
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>