sibling-function-descriptors.tentative.html (6123B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() and sibling-count() invalid in descriptors</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10982"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id="page_sheet"> 8 @page { 9 margin: 100px; 10 margin: calc(0px * sibling-index()); 11 } 12 @page { 13 margin: 100px; 14 margin: calc(0px * sibling-count()); 15 } 16 </style> 17 <style id="font_face_sheet"> 18 @font-face { 19 font-family: my-font; 20 font-weight: 300; 21 font-weight: calc(max(0 * sibling-index(), 400)); 22 font-feature-settings: "vert" 2; 23 font-feature-settings: "vert" calc(max(sibling-index(), 1)); 24 } 25 @font-face { 26 font-family: my-font; 27 font-weight: 300; 28 font-weight: calc(max(0 * sibling-count(), 400)); 29 font-feature-settings: "vert" 2; 30 font-feature-settings: "vert" calc(max(sibling-count(), 1)); 31 } 32 </style> 33 <style id="font_palette_sheet"> 34 @font-palette-values --foo { 35 font-family: my-font; 36 base-palette: 1; 37 base-palette: calc(max(sibling-index(), 2)); 38 override-colors: 1 green; 39 override-colors: sibling-index() red; 40 } 41 @font-palette-values --foo { 42 font-family: my-font; 43 base-palette: 1; 44 base-palette: calc(max(sibling-count(), 2)); 45 override-colors: 1 green; 46 override-colors: sibling-count() red; 47 } 48 </style> 49 <style id="counter_style_sheet"> 50 @counter-style --foo { 51 system: fixed 1; 52 system: fixed calc(max(sibling-index(), 2)); 53 negative: --pass; 54 negative: linear-gradient(red calc(20px * sibling-index()), pink); 55 prefix: --pass; 56 prefix: linear-gradient(red calc(20px * sibling-index()), pink); 57 suffix: --pass; 58 suffix: linear-gradient(red calc(20px * sibling-index()), pink); 59 range: 1 infinite; 60 range: calc(max(sibling-index(), 2)) infinite; 61 pad: 1 --pass; 62 pad: 1 linear-gradient(red calc(20px * sibling-index()), pink); 63 pad: calc(max(sibling-index(), 2)) --fail; 64 symbols: --pass; 65 symbols: linear-gradient(red calc(20px * sibling-index()), pink); 66 } 67 @counter-style --foo { 68 system: fixed 1; 69 system: fixed calc(max(sibling-count(), 2)); 70 negative: --pass; 71 negative: linear-gradient(green, green); 72 negative: linear-gradient(red calc(20px * sibling-count()), pink); 73 prefix: --pass; 74 prefix: linear-gradient(red calc(20px * sibling-count()), pink); 75 suffix: --pass; 76 suffix: linear-gradient(red calc(20px * sibling-count()), pink); 77 range: 1 infinite; 78 range: calc(max(sibling-count(), 2)) infinite; 79 pad: 1 --pass; 80 pad: 1 linear-gradient(red calc(20px * sibling-count()), pink); 81 pad: calc(max(sibling-count(), 2)) --fail; 82 symbols: --pass; 83 symbols: linear-gradient(red calc(20px * sibling-count()), pink); 84 } 85 </style> 86 <style id="font_features_sheet"> 87 @font-feature-values foo { 88 @swash { pretty: 1; } 89 @swash { pretty: calc(max(sibling-index(), 2)); } 90 } 91 @font-feature-values bar { 92 @swash { pretty: 1; } 93 @swash { pretty: calc(max(sibling-count(), 2)); } 94 } 95 </style> 96 <script> 97 const page_rules = page_sheet.sheet.cssRules; 98 99 test(() => { 100 assert_equals(page_rules[0].style.margin, "100px"); 101 }, "sibling-index() should not be allowed in @page properties"); 102 103 test(() => { 104 assert_equals(page_rules[1].style.margin, "100px"); 105 }, "sibling-count() should not be allowed in @page properties"); 106 107 const font_face_rules = font_face_sheet.sheet.cssRules; 108 109 test(() => { 110 assert_equals(font_face_rules[0].style.fontWeight, "300"); 111 assert_equals(font_face_rules[0].style.fontFeatureSettings, "\"vert\" 2"); 112 }, "sibling-index() should not be allowed in @font-face descriptors"); 113 114 test(() => { 115 assert_equals(font_face_rules[1].style.fontWeight, "300"); 116 assert_equals(font_face_rules[1].style.fontFeatureSettings, "\"vert\" 2"); 117 }, "sibling-count() should not be allowed in @font-face descriptors"); 118 119 const font_palette_rules = font_palette_sheet.sheet.cssRules; 120 121 test(() => { 122 assert_equals(font_palette_rules[0].basePalette, "1"); 123 assert_equals(font_palette_rules[0].overrideColors, "1 green"); 124 }, "sibling-index() should not be allowed in @font-palette-values descriptors"); 125 126 test(() => { 127 assert_equals(font_palette_rules[1].basePalette, "1"); 128 assert_equals(font_palette_rules[1].overrideColors, "1 green"); 129 }, "sibling-count() should not be allowed in @font-palette-values descriptors"); 130 131 const counter_style_rules = counter_style_sheet.sheet.cssRules; 132 133 test(() => { 134 assert_equals(counter_style_rules[0].system, "fixed 1"); 135 assert_equals(counter_style_rules[0].negative, "--pass"); 136 assert_equals(counter_style_rules[0].prefix, "--pass"); 137 assert_equals(counter_style_rules[0].suffix, "--pass"); 138 assert_equals(counter_style_rules[0].range, "1 infinite"); 139 assert_equals(counter_style_rules[0].pad, "1 --pass"); 140 assert_equals(counter_style_rules[0].symbols, "--pass"); 141 }, "sibling-index() should not be allowed in @counter-style descriptors"); 142 143 test(() => { 144 assert_equals(counter_style_rules[1].system, "fixed 1"); 145 assert_equals(counter_style_rules[1].negative, "--pass"); 146 assert_equals(counter_style_rules[1].prefix, "--pass"); 147 assert_equals(counter_style_rules[1].suffix, "--pass"); 148 assert_equals(counter_style_rules[1].range, "1 infinite"); 149 assert_equals(counter_style_rules[1].pad, "1 --pass"); 150 assert_equals(counter_style_rules[1].symbols, "--pass"); 151 }, "sibling-count() should not be allowed in @counter-style descriptors"); 152 153 154 const font_features_rules = font_features_sheet.sheet.cssRules; 155 156 test(() => { 157 const swash = font_features_rules[0].swash; 158 assert_equals(swash.get("pretty")[0], 1); 159 }, "sibling-index() should not be allowed in @font-feature-values descriptors"); 160 161 test(() => { 162 const swash = font_features_rules[1].swash; 163 assert_equals(swash.get("pretty")[0], 1); 164 }, "sibling-count() should not be allowed in @font-feature-values descriptors"); 165 166 </script>