counters-flex-circular.html (2534B)
1 <!doctype html> 2 <title>CSS Container Queries Test: counters inside container should not affect container size via flex layout</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type"> 4 <link rel="stylesheet" href="/fonts/ahem.css"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 #flex { 10 width: 200px; 11 display: flex; 12 flex-direction: row; 13 counter-reset: my-count 0; 14 } 15 /* #item1 grows to use remaining space given #item2's content */ 16 #item1 { 17 flex-grow: 1; 18 height: 100px; 19 } 20 #container { 21 container-type: size; 22 } 23 #item2 { 24 flex-grow: 0; 25 font: 50px/1 Ahem; 26 } 27 /* #item2 size depends on generated content which depends on my-count 28 counter. */ 29 #item2::before { 30 display: inline-block; 31 content: counter(my-count); 32 } 33 /* The counter-increment inside the container should not affect the size of 34 #item2 because of style containment. Otherwise we would have a 35 circularity. */ 36 @container (min-width: 125px) { 37 #inner { 38 counter-increment: my-count 10; 39 background-color: green; 40 } 41 } 42 </style> 43 <div id="flex"> 44 <div id="item1"> 45 <div id="container"> 46 <div id="inner"></div> 47 </div> 48 </div> 49 <div id="item2"></div> 50 </div> 51 <script> 52 setup(() => assert_implements_size_container_queries(), { explicit_done: true }); 53 54 document.fonts.ready.then(() => { 55 const item1_width = parseInt(getComputedStyle(item1).width); 56 const item2_width = parseInt(getComputedStyle(item2).width); 57 const container_width = parseInt(getComputedStyle(container).width); 58 const inner_width = parseInt(getComputedStyle(inner).width); 59 60 test(() => { 61 assert_equals(item1_width, container_width); 62 assert_equals(item1_width, inner_width); 63 }, "#item1, #container, and #inner should all have the same width: " + item1_width); 64 65 test(() => { 66 let expected_background = container_width >= 125 ? "rgb(0, 128, 0)" : "rgba(0, 0, 0, 0)"; 67 assert_equals(getComputedStyle(inner).backgroundColor, expected_background); 68 }, "The container query should match the layed out width"); 69 70 test(() => { 71 assert_equals(item1_width + item2_width, 200); 72 }, "The sum of the item widths should match the flexbox width"); 73 74 test(() => { 75 assert_equals(parseInt(getComputedStyle(item2, "::before").width), item2_width); 76 }, "The size of the flex item #2 should be given by its contents"); 77 78 done(); 79 }) 80 </script>