container-units-ineligible-container.html (1571B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Container Relative Units: ineligible container</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <style> 7 #grandparent, #parent { container-type: size; } 8 #grandparent { width: 300px; height: 250px; } 9 #parent { width: 200px; height: 150px; } 10 #target { width: 10cqw; height: 10cqh; } 11 </style> 12 <div id="log"></div> 13 <div id="grandparent"> 14 <div id="parent"> 15 <div id="target"></div> 16 </div> 17 </div> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="support/cq-testcommon.js"></script> 21 <script> 22 setup(() => assert_implements_size_container_queries()); 23 const cases = { 24 "/* basic */": [20, 15], 25 "display: table": [30, 25], 26 "display: table-cell": [30, 25], 27 "display: inline": [30, 25], 28 "display: contents": [30, 25], 29 "display: none": [30, 25], 30 "container-type: normal": [30, 25], 31 "container-type: inline-size": [20, 25], 32 "container-type: inline-size; writing-mode: vertical-lr": [30, 15], 33 }; 34 const parent = document.getElementById("parent"); 35 const target = document.getElementById("target"); 36 const cs = getComputedStyle(target); 37 for (let [style, [width, height]] of Object.entries(cases)) { 38 test(() => { 39 parent.style.cssText = style; 40 assert_equals(cs.width, width + "px", "width"); 41 assert_equals(cs.height, height + "px", "height"); 42 }, style); 43 } 44 </script>