container-units-in-at-container.html (3516B)
1 <!doctype html> 2 <title>Container Relative Units: in @container prelude</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 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 .size { container-type: size; } 9 .inline { container-type: inline-size; } 10 .ancestor { 11 container-type: size; 12 width: 64px; 13 height: 160px; 14 } 15 .parent { 16 container-type: inline-size; 17 width: 32px; 18 height: 77px; 19 } 20 .container { 21 container-type: size; 22 width: 16px; 23 height: 16px; 24 } 25 26 /* Unit should resolve against .parent width. */ 27 @container ((width = 16px) and (width = 50cqw)) { #child1 { --cqw:true; } } 28 29 /* Unit should resolve against .ancestor height. */ 30 @container ((width = 16px) and (width = 10cqh)) { #child1 { --cqh:true; } } 31 32 /* Unit should resolve against .parent width. */ 33 @container ((width = 16px) and (width = 50cqi)) { #child1 { --cqi:true; } } 34 35 /* Unit should resolve against .ancestor height. */ 36 @container ((width = 16px) and (width = 10cqb)) { #child1 { --cqb:true; } } 37 38 /* Unit should resolve against biggest of w/h. */ 39 @container ((width = 16px) and (width = 10cqmax)) { #child1 { --cqmax:true; } } 40 41 /* Unit should resolve against smallest of w/h. */ 42 @container ((width = 16px) and (width = 50cqmin)) { #child1 { --cqmin:true; } } 43 44 /* Flipped writing mode: */ 45 46 /* Non-logical units are the same as above */ 47 @container ((width = 16px) and (width = 50cqw)) { #child2 { --cqw:true; } } 48 @container ((width = 16px) and (width = 10cqh)) { #child2 { --cqh:true; } } 49 @container ((width = 16px) and (width = 10cqmax)) { #child2 { --cqmax:true; } } 50 @container ((width = 16px) and (width = 50cqmin)) { #child2 { --cqmin:true; } } 51 52 /* Unit should resolve against .ancestor height. */ 53 @container ((width = 16px) and (width = 50cqb)) { #child2 { --cqi:true; } } 54 55 /* Unit should resolve against .parent width. */ 56 @container ((width = 16px) and (width = 10cqi)) { #child2 { --cqb:true; } } 57 </style> 58 59 <div class=ancestor> 60 <div class=parent> 61 <div class=container> 62 <div id=child1>Test1</div> 63 </div> 64 </div> 65 </div> 66 67 <div class=ancestor> 68 <div class=parent> 69 <div class=container style="writing-mode:vertical-rl;"> 70 <div id=child2>Test1</div> 71 </div> 72 </div> 73 </div> 74 75 <script> 76 setup(() => assert_implements_size_container_queries()); 77 78 let units = [ 79 'cqw', 80 'cqh', 81 'cqi', 82 'cqb', 83 'cqmin', 84 'cqmax', 85 ]; 86 87 for (let unit of units) { 88 test(() => { 89 assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true'); 90 }, `${unit} unit resolves against appropriate container`); 91 } 92 93 // Ensure that the writing mode of the subject element is not relevant for 94 // container-relative units in the @container prelude. 95 for (let unit of units) { 96 test((t) => { 97 t.add_cleanup(() => { 98 child1.style = ''; 99 }); 100 child1.style.writingMode = 'vertical-rl'; 101 assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true'); 102 }, `${unit} unit resolves against appropriate container (vertical writing-mode on subject)`); 103 } 104 105 for (let unit of units) { 106 test(() => { 107 assert_equals(getComputedStyle(child2).getPropertyValue(`--${unit}`), 'true'); 108 }, `${unit} unit resolves against appropriate container (vertical writing-mode on container)`); 109 } 110 111 </script>