svg-root-size-container.html (995B)
1 <!doctype html> 2 <title>CSS Container Queries Test: SVG root as a size query container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 svg { 9 display: block; 10 width: 100px; 11 height: 100px; 12 container-type: size; 13 } 14 @container (width = 100px) { 15 #div, #text { color: green; } 16 } 17 </style> 18 <svg> 19 <text id="text">Green</text> 20 <foreignObject> 21 <div id="div">Green</div> 22 </foreignObject> 23 </svg> 24 <script> 25 setup(() => assert_implements_size_container_queries()); 26 27 const green = "rgb(0, 128, 0)"; 28 29 test(() => { 30 assert_equals(getComputedStyle(text).color, green); 31 }, "SVG text querying SVG root size container"); 32 33 test(() => { 34 assert_equals(getComputedStyle(div).color, green); 35 }, "div in foreignObject querying SVG root size container"); 36 </script>