| <!DOCTYPE html> |
| <title>CSS Values and Units Test: sibling-index() and sibling-count() invalid in descriptors</title> |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10982"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="page_sheet"> |
| @page { |
| margin: 100px; |
| margin: calc(0px * sibling-index()); |
| } |
| @page { |
| margin: 100px; |
| margin: calc(0px * sibling-count()); |
| } |
| </style> |
| <style id="font_face_sheet"> |
| @font-face { |
| font-family: my-font; |
| font-weight: 300; |
| font-weight: calc(max(0 * sibling-index(), 400)); |
| font-feature-settings: "vert" 2; |
| font-feature-settings: "vert" calc(max(sibling-index(), 1)); |
| } |
| @font-face { |
| font-family: my-font; |
| font-weight: 300; |
| font-weight: calc(max(0 * sibling-count(), 400)); |
| font-feature-settings: "vert" 2; |
| font-feature-settings: "vert" calc(max(sibling-count(), 1)); |
| } |
| </style> |
| <style id="font_palette_sheet"> |
| @font-palette-values --foo { |
| font-family: my-font; |
| base-palette: 1; |
| base-palette: calc(max(sibling-index(), 2)); |
| override-colors: 1 green; |
| override-colors: sibling-index() red; |
| } |
| @font-palette-values --foo { |
| font-family: my-font; |
| base-palette: 1; |
| base-palette: calc(max(sibling-count(), 2)); |
| override-colors: 1 green; |
| override-colors: sibling-count() red; |
| } |
| </style> |
| <style id="counter_style_sheet"> |
| @counter-style --foo { |
| system: fixed 1; |
| system: fixed calc(max(sibling-index(), 2)); |
| negative: --pass; |
| negative: linear-gradient(red calc(20px * sibling-index()), pink); |
| prefix: --pass; |
| prefix: linear-gradient(red calc(20px * sibling-index()), pink); |
| suffix: --pass; |
| suffix: linear-gradient(red calc(20px * sibling-index()), pink); |
| range: 1 infinite; |
| range: calc(max(sibling-index(), 2)) infinite; |
| pad: 1 --pass; |
| pad: 1 linear-gradient(red calc(20px * sibling-index()), pink); |
| pad: calc(max(sibling-index(), 2)) --fail; |
| symbols: --pass; |
| symbols: linear-gradient(red calc(20px * sibling-index()), pink); |
| } |
| @counter-style --foo { |
| system: fixed 1; |
| system: fixed calc(max(sibling-count(), 2)); |
| negative: --pass; |
| negative: linear-gradient(green, green); |
| negative: linear-gradient(red calc(20px * sibling-count()), pink); |
| prefix: --pass; |
| prefix: linear-gradient(red calc(20px * sibling-count()), pink); |
| suffix: --pass; |
| suffix: linear-gradient(red calc(20px * sibling-count()), pink); |
| range: 1 infinite; |
| range: calc(max(sibling-count(), 2)) infinite; |
| pad: 1 --pass; |
| pad: 1 linear-gradient(red calc(20px * sibling-count()), pink); |
| pad: calc(max(sibling-count(), 2)) --fail; |
| symbols: --pass; |
| symbols: linear-gradient(red calc(20px * sibling-count()), pink); |
| } |
| </style> |
| <style id="font_features_sheet"> |
| @font-feature-values foo { |
| @swash { pretty: 1; } |
| @swash { pretty: calc(max(sibling-index(), 2)); } |
| } |
| @font-feature-values bar { |
| @swash { pretty: 1; } |
| @swash { pretty: calc(max(sibling-count(), 2)); } |
| } |
| </style> |
| <script> |
| const page_rules = page_sheet.sheet.cssRules; |
| |
| test(() => { |
| assert_equals(page_rules[0].style.margin, "100px"); |
| }, "sibling-index() should not be allowed in @page properties"); |
| |
| test(() => { |
| assert_equals(page_rules[1].style.margin, "100px"); |
| }, "sibling-count() should not be allowed in @page properties"); |
| |
| const font_face_rules = font_face_sheet.sheet.cssRules; |
| |
| test(() => { |
| assert_equals(font_face_rules[0].style.fontWeight, "300"); |
| assert_equals(font_face_rules[0].style.fontFeatureSettings, "\"vert\" 2"); |
| }, "sibling-index() should not be allowed in @font-face descriptors"); |
| |
| test(() => { |
| assert_equals(font_face_rules[1].style.fontWeight, "300"); |
| assert_equals(font_face_rules[1].style.fontFeatureSettings, "\"vert\" 2"); |
| }, "sibling-count() should not be allowed in @font-face descriptors"); |
| |
| const font_palette_rules = font_palette_sheet.sheet.cssRules; |
| |
| test(() => { |
| assert_equals(font_palette_rules[0].basePalette, "1"); |
| assert_equals(font_palette_rules[0].overrideColors, "1 green"); |
| }, "sibling-index() should not be allowed in @font-palette-values descriptors"); |
| |
| test(() => { |
| assert_equals(font_palette_rules[1].basePalette, "1"); |
| assert_equals(font_palette_rules[1].overrideColors, "1 green"); |
| }, "sibling-count() should not be allowed in @font-palette-values descriptors"); |
| |
| const counter_style_rules = counter_style_sheet.sheet.cssRules; |
| |
| test(() => { |
| assert_equals(counter_style_rules[0].system, "fixed 1"); |
| assert_equals(counter_style_rules[0].negative, "--pass"); |
| assert_equals(counter_style_rules[0].prefix, "--pass"); |
| assert_equals(counter_style_rules[0].suffix, "--pass"); |
| assert_equals(counter_style_rules[0].range, "1 infinite"); |
| assert_equals(counter_style_rules[0].pad, "1 --pass"); |
| assert_equals(counter_style_rules[0].symbols, "--pass"); |
| }, "sibling-index() should not be allowed in @counter-style descriptors"); |
| |
| test(() => { |
| assert_equals(counter_style_rules[1].system, "fixed 1"); |
| assert_equals(counter_style_rules[1].negative, "--pass"); |
| assert_equals(counter_style_rules[1].prefix, "--pass"); |
| assert_equals(counter_style_rules[1].suffix, "--pass"); |
| assert_equals(counter_style_rules[1].range, "1 infinite"); |
| assert_equals(counter_style_rules[1].pad, "1 --pass"); |
| assert_equals(counter_style_rules[1].symbols, "--pass"); |
| }, "sibling-count() should not be allowed in @counter-style descriptors"); |
| |
| |
| const font_features_rules = font_features_sheet.sheet.cssRules; |
| |
| test(() => { |
| const swash = font_features_rules[0].swash; |
| assert_equals(swash.get("pretty")[0], 1); |
| }, "sibling-index() should not be allowed in @font-feature-values descriptors"); |
| |
| test(() => { |
| const swash = font_features_rules[1].swash; |
| assert_equals(swash.get("pretty")[0], 1); |
| }, "sibling-count() should not be allowed in @font-feature-values descriptors"); |
| |
| </script> |
