anchor-size-parse-valid.html (2970B)
1 <!DOCTYPE html> 2 <title>Tests parsing of the anchor-size() function</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 9 <script> 10 const anchorNames = [ 11 '--foo', 12 '', 13 ]; 14 15 const sizeProperties = [ 16 'width', 17 'min-width', 18 'max-width', 19 'height', 20 'min-height', 21 'max-height', 22 'block-size', 23 'min-block-size', 24 'max-block-size', 25 'inline-size', 26 'min-inline-size', 27 'max-inline-size', 28 ]; 29 30 const insetProperties = [ 31 'left', 32 'right', 33 'top', 34 'bottom', 35 'inset', 36 'inset-block', 37 'inset-block-start', 38 'inset-block-end', 39 'inset-inline', 40 'inset-inline-start', 41 'inset-inline-end', 42 ]; 43 44 const marginProperties = [ 45 'margin', 46 'margin-left', 47 'margin-right', 48 'margin-top', 49 'margin-bottom', 50 'margin-block', 51 'margin-block-start', 52 'margin-block-end', 53 'margin-inline', 54 'margin-inline-start', 55 'margin-inline-end', 56 ]; 57 58 const anchorSizes = [ 59 'width', 60 'height', 61 'block', 62 'inline', 63 'self-block', 64 'self-inline', 65 ]; 66 67 const fallbacks = [ 68 null, 69 '1px', 70 '50%', 71 'calc(50% + 1px)', 72 'anchor-size(block)', 73 'anchor-size(--bar block)', 74 'anchor-size(--bar block, anchor-size(--baz inline))', 75 ]; 76 77 // Tests basic combinations 78 for (let name of anchorNames) { 79 for (let property of sizeProperties.concat(insetProperties, marginProperties)) { 80 for (let size of anchorSizes) { 81 for (let fallback of fallbacks) { 82 let value = `anchor-size(${name ? name + ' ' : ''}${size}${fallback ? ', ' + fallback : ''})`; 83 test_valid_value(property, value); 84 if (name) { 85 // The <anchor-element> is allowed to appear after the <anchor-size> 86 let value_flip_order = `anchor-size(${size} ${name}${fallback ? ', ' + fallback : ''})`; 87 test_valid_value(property, value_flip_order, value); 88 } 89 } 90 } 91 } 92 } 93 94 // Implicit <anchor-size> 95 test_valid_value('width', 'anchor-size()'); 96 test_valid_value('width', 'anchor-size(--foo)'); 97 test_valid_value('width', 'anchor-size(--foo, 10px)'); 98 test_valid_value('width', 'anchor-size(10px)'); 99 100 // Tests that anchor-size() can be used in a calc tree 101 // Still follow the simplification process as outlined in https://drafts.csswg.org/css-values-4/#calc-simplification 102 for (const prop of ['width', 'max-width', 'margin-left']) { 103 test_valid_value(prop, 'calc((anchor-size(--foo width) + anchor-size(--bar height)) / 2)', 'calc(0.5 * (anchor-size(--foo width) + anchor-size(--bar height)))'); 104 test_valid_value(prop, 'calc(0.5 * (anchor-size(--foo width) + anchor-size(--bar height)))'); 105 test_valid_value(prop, 'anchor-size(--foo width, calc(0.5 * anchor-size(--bar height)))'); 106 test_valid_value(prop, 'min(100px, 10%, anchor-size(--foo width), anchor-size(--bar height))'); 107 } 108 </script>