size-container-no-principal-box.html (2179B)
1 <!doctype html> 2 <title>CSS Container Queries Test: size container types apply to elements without a principal box</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 #outer { 9 container-type: inline-size; 10 } 11 #inner_none { 12 display: none; 13 container-type: inline-size; 14 } 15 #inner_contents { 16 display: contents; 17 container-type: inline-size; 18 } 19 @container (min-width: 0) { 20 span { color: red; } 21 } 22 @container (min-width: 0) { 23 #ref { color: green; } 24 } 25 @container not (max-width: 0) { 26 span { background-color: red; } 27 } 28 @container not (max-width: 0) { 29 #ref { background-color: green; } 30 } 31 </style> 32 <div id="outer"> 33 <div id="ref"></div> 34 <div id="inner_none"><span></span></div> 35 <div id="inner_contents"><span></span></div> 36 </div> 37 <script> 38 setup(() => assert_implements_size_container_queries()); 39 40 test(() => { 41 assert_equals(getComputedStyle(ref).color, "rgb(0, 128, 0)"); 42 }, "(min-width: 0) can match a container with a principal box"); 43 44 test(() => { 45 assert_equals(getComputedStyle(inner_none.firstChild).color, "rgb(0, 0, 0)"); 46 }, "(min-width: 0) does not match a container without a principal box (display:none)"); 47 48 test(() => { 49 assert_equals(getComputedStyle(inner_contents.firstChild).color, "rgb(0, 0, 0)"); 50 }, "(min-width: 0) does not match a container without a principal box (display:contents)"); 51 52 test(() => { 53 assert_equals(getComputedStyle(ref).backgroundColor, "rgb(0, 128, 0)"); 54 }, "not (max-width: 0) can match a container with a principal box"); 55 56 test(() => { 57 assert_equals(getComputedStyle(inner_none.firstChild).backgroundColor, "rgba(0, 0, 0, 0)"); 58 }, "not (max-width: 0) does not match a container without a principal box (display:none)"); 59 60 test(() => { 61 assert_equals(getComputedStyle(inner_contents.firstChild).backgroundColor, "rgba(0, 0, 0, 0)"); 62 }, "not (max-width: 0) does not match a container without a principal box (display:contents)"); 63 </script>