container-units-svglength.html (3201B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: container-relative units in SVGLength</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 9 <style> 10 #container { 11 container-type: size; 12 width: 200px; 13 height: 150px; 14 } 15 </style> 16 <div id=container> 17 <svg id=rootSVGElement> 18 <rect id="rect1" width="10cqw" height="10cqh"/> 19 <rect id="rect2" width="10cqi" height="10cqb"/> 20 <rect id="rect3" width="10cqmin" height="10cqmax"/> 21 <rect id="rect4" width="calc(10cqmin + 10cqmax)" height="calc(10cqw + 3px)"/> 22 <rect id="rect_dynamic"/> 23 <rect id="rect_animated" width="42px" height="42px" fill="green"> 24 <animate id=animation attributeName=width from="5cqw" to="10cqw" begin="0s" dur="4s"/> 25 </rect> 26 </svg> 27 </div> 28 <script> 29 setup(() => { 30 assert_implements_size_container_queries(); 31 container.offsetTop; 32 }); 33 34 function cleanup() { 35 rect_dynamic.removeAttribute('width'); 36 rect_dynamic.removeAttribute('height'); 37 } 38 39 test(() => { 40 assert_equals(rect1.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN); 41 }, 'unitType with container-relative units'); 42 43 test(() => { 44 assert_equals(rect1.width.baseVal.value, 20); 45 assert_equals(rect1.height.baseVal.value, 15); 46 }, 'cqw,cqh can be resolved'); 47 48 test(() => { 49 assert_equals(rect2.width.baseVal.value, 20); 50 assert_equals(rect2.height.baseVal.value, 15); 51 }, 'cqi,cqb can be resolved'); 52 53 test(() => { 54 assert_equals(rect3.width.baseVal.value, 15); 55 assert_equals(rect3.height.baseVal.value, 20); 56 }, 'cqmin,cqmax can be resolved'); 57 58 test(() => { 59 assert_equals(rect4.width.baseVal.value, 35); 60 assert_equals(rect4.height.baseVal.value, 23); 61 }, 'calc() with container-relative units can be resolved'); 62 63 test((t) => { 64 t.add_cleanup(cleanup); 65 rect_dynamic.setAttribute('width', '20cqw'); 66 rect_dynamic.setAttribute('height', '20cqh'); 67 assert_equals(rect_dynamic.width.baseVal.value, 40); 68 assert_equals(rect_dynamic.height.baseVal.value, 30); 69 70 rect_dynamic.width.baseVal.value = 80; 71 rect_dynamic.height.baseVal.value = 45; 72 assert_equals(rect_dynamic.getAttribute('width'), '80'); 73 assert_equals(rect_dynamic.getAttribute('height'), '45'); 74 }, 'Can modify value with container-relative units'); 75 76 smil_async_test((t) => { 77 t.add_cleanup(cleanup); 78 let assert_width = (expected) => { 79 let epsilon = 1.0; 80 return () => { 81 assert_approx_equals(rect_animated.width.animVal.value, expected, epsilon); 82 }; 83 }; 84 const expectedValues = [ 85 // [animationId, time, sampleCallback] 86 ["animation", 0.0, assert_width(10)], 87 ["animation", 2.0, assert_width(15)], 88 ["animation", 3.999, assert_width(20)], 89 ["animation", 4, assert_width(42)], 90 ]; 91 92 runAnimationTest(t, expectedValues); 93 }); 94 95 </script>