query-content-box.html (3397B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Size queries match content-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 .container { 9 container-type: size; 10 border: 10px solid black; 11 padding: 40px; 12 margin: 20px; 13 } 14 15 #container1 { 16 box-sizing: content-box; 17 width: 100px; 18 height: 100px; 19 } 20 21 #container2 { 22 box-sizing: border-box; 23 width: 200px; 24 height: 200px; 25 } 26 27 #container3 { 28 box-sizing: content-box; 29 width: 100px; 30 height: 100px; 31 overflow: scroll; 32 } 33 34 #container4 { 35 box-sizing: border-box; 36 width: 200px; 37 height: 200px; 38 overflow: scroll; 39 } 40 41 #container5 { 42 box-sizing: content-box; 43 width: 100px; 44 height: 100px; 45 overflow-x: scroll; 46 overflow-y: auto; 47 scrollbar-gutter: stable; 48 } 49 50 #container6 { 51 box-sizing: border-box; 52 width: 200px; 53 height: 200px; 54 overflow-x: scroll; 55 overflow-y: auto; 56 scrollbar-gutter: stable; 57 } 58 59 @container ((width = 100px) and (height = 100px)) { 60 .target { 61 background-color: green; 62 height: 100%; 63 } 64 } 65 @container ((width < 100px) and (height < 100px)) { 66 .target { 67 background-color: blue; 68 height: 100%; 69 } 70 } 71 </style> 72 <div id="sentinel" style="overflow: scroll; width: min-content;"></div> 73 <div id="container1" class="container"> 74 <div class="target"></div> 75 </div> 76 <div id="container2" class="container"> 77 <div class="target"></div> 78 </div> 79 <div id="container3" class="container"> 80 <div class="target"></div> 81 </div> 82 <div id="container4" class="container"> 83 <div class="target"></div> 84 </div> 85 <div id="container5" class="container"> 86 <div class="target"></div> 87 </div> 88 <div id="container6" class="container"> 89 <div class="target"></div> 90 </div> 91 <script> 92 setup(() => assert_implements_size_container_queries()); 93 94 const green = "rgb(0, 128, 0)"; 95 const blue = "rgb(0, 0, 255)"; 96 const has_non_overlay_scrollbars = document.getElementById('sentinel') != 0; 97 const scroll_color = has_non_overlay_scrollbars ? blue : green; 98 99 test(() => { 100 assert_equals(getComputedStyle(document.querySelector("#container1 > .target")).backgroundColor, green); 101 }, "Size queries with content-box sizing"); 102 103 test(() => { 104 assert_equals(getComputedStyle(document.querySelector("#container2 > .target")).backgroundColor, green); 105 }, "Size queries with border-box sizing"); 106 107 test(() => { 108 assert_equals(getComputedStyle(document.querySelector("#container3 > .target")).backgroundColor, scroll_color); 109 }, "Size queries with content-box sizing and overflow:scroll"); 110 111 test(() => { 112 assert_equals(getComputedStyle(document.querySelector("#container4 > .target")).backgroundColor, scroll_color); 113 }, "Size queries with border-box sizing and overflow:scroll"); 114 115 test(() => { 116 assert_equals(getComputedStyle(document.querySelector("#container5 > .target")).backgroundColor, scroll_color); 117 }, "Size queries with content-box sizing and scrollbar-gutter:stable"); 118 119 test(() => { 120 assert_equals(getComputedStyle(document.querySelector("#container6 > .target")).backgroundColor, scroll_color); 121 }, "Size queries with border-box sizing and scrollbar-gutter:stable"); 122 </script>