size-feature-evaluation.html (3227B)
1 <!doctype html> 2 <title>Evaluation of size features</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 8 <div id=container> 9 <div id=target> 10 Test 11 </div> 12 </div> 13 14 <script> 15 setup(() => assert_implements_size_container_queries()); 16 17 function test_evaluation(container_class, query, expected) { 18 test(function(t) { 19 let style_node = document.createElement('style'); 20 t.add_cleanup(() => { 21 container.classList.remove(container_class); 22 style_node.remove(); 23 }); 24 style_node.innerText = `@container ${query} { #target { --applied:true; } }`; 25 26 assert_equals(getComputedStyle(target).getPropertyValue('--applied'), ''); 27 container.classList.add(container_class); 28 document.head.append(style_node); 29 assert_equals(getComputedStyle(target).getPropertyValue('--applied'), expected ? 'true' : ''); 30 }, `${query} (.${container_class})`); 31 } 32 33 </script> 34 35 <style> 36 .horizontal { 37 width: 100px; 38 height: 200px; 39 container-type: size; 40 } 41 42 .vertical { 43 width: 100px; 44 height: 200px; 45 container-type: size; 46 writing-mode: vertical-rl; 47 } 48 </style> 49 <script> 50 51 for (let cls of ['horizontal', 'vertical']) { 52 53 let logical_width = (cls == 'horizontal') ? 'inline' : 'block'; 54 let logical_height = (cls == 'horizontal') ? 'block' : 'inline'; 55 56 test_evaluation(cls, '(width < 100px)', false); 57 test_evaluation(cls, '(width >= 100px)', true); 58 test_evaluation(cls, '(min-width: 100px)', true); 59 test_evaluation(cls, '(min-width: 101px)', false); 60 test_evaluation(cls, '(max-width: 100px)', true); 61 test_evaluation(cls, '(max-width: 99px)', false); 62 63 test_evaluation(cls, '(height < 200px)', false); 64 test_evaluation(cls, '(height >= 200px)', true); 65 test_evaluation(cls, '(min-height: 200px)', true); 66 test_evaluation(cls, '(min-height: 201px)', false); 67 test_evaluation(cls, '(max-height: 200px)', true); 68 test_evaluation(cls, '(max-height: 199px)', false); 69 70 test_evaluation(cls, `(${logical_width}-size < 100px)`, false); 71 test_evaluation(cls, `(${logical_width}-size >= 100px)`, true); 72 test_evaluation(cls, `(min-${logical_width}-size: 100px)`, true); 73 test_evaluation(cls, `(min-${logical_width}-size: 101px)`, false); 74 test_evaluation(cls, `(max-${logical_width}-size: 100px)`, true); 75 test_evaluation(cls, `(max-${logical_width}-size: 99px)`, false); 76 77 test_evaluation(cls, `(${logical_height}-size < 200px)`, false); 78 test_evaluation(cls, `(${logical_height}-size >= 200px)`, true); 79 test_evaluation(cls, `(min-${logical_height}-size: 200px)`, true); 80 test_evaluation(cls, `(min-${logical_height}-size: 201px)`, false); 81 test_evaluation(cls, `(max-${logical_height}-size: 200px)`, true); 82 test_evaluation(cls, `(max-${logical_height}-size: 199px)`, false); 83 84 test_evaluation(cls, '(orientation: landscape)', false); 85 test_evaluation(cls, '(orientation: portrait)', true); 86 87 test_evaluation(cls, '(aspect-ratio: 1/2)', true); 88 test_evaluation(cls, '(aspect-ratio: 2/1)', false); 89 } 90 91 </script>