function-container-dynamic.html (1314B)
1 <!DOCTYPE html> 2 <title>Custom Functions: @container responds to changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container { 8 container-type: size; 9 width: 50px; 10 height: 50px; 11 } 12 @function --f() { 13 result: A; 14 @container (width = 100px) { 15 result: B; 16 } 17 @container ((width >= 110px) and (width <= 140px)) { 18 result: C; 19 } 20 @container (width = 150px) { 21 result: D; 22 } 23 } 24 #target { 25 --actual: --f(); 26 } 27 </style> 28 29 <div id=container> 30 <div id=target> 31 </div> 32 </div> 33 34 <script> 35 test(() => { 36 let actualValue = () => getComputedStyle(target).getPropertyValue('--actual'); 37 38 assert_equals(actualValue(), 'A', '--actual before resize'); 39 40 // [<width of container>, <expected function result>] 41 let data = [ 42 ['100px', 'B'], 43 ['105px', 'A'], 44 ['110px', 'C'], 45 ['125px', 'C'], 46 ['140px', 'C'], 47 ['145px', 'A'], 48 ['150px', 'D'], 49 ['155px', 'A'], 50 ]; 51 52 for (let d of data) { 53 container.style.width = d[0]; 54 let expected = d[1]; 55 assert_equals(actualValue(), expected, `--actual after resize to ${d[0]}`); 56 } 57 }); 58 </script>