Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/tree-counting/sibling-function-descriptors.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() and sibling-count() invalid in descriptors</title>
<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>