<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fonts Module Level 4: parsing @font-palette-values</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-values">
<meta name="assert" content="@font-palette-values is parsed correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="style">
@font-palette-values {
}

@font-palette-values A {
}

@font-palette-values --A --B {
}

/* 0 */
@font-palette-values --A {
    font-family: a, b;
}

/* 1 */
@font-palette-values --A {
    font-family: 1;
}

/* 2 */
@font-palette-values --A {
    font: 12px a;
}

/* 3 */
@font-palette-values --A {
    base-palette: 1 2;
}

/* 4 */
@font-palette-values --A {
    base-palette: ident;
}

/* 5 */
@font-palette-values --A {
    base-palette: "a" "b";
}

/* 6 */
@font-palette-values --A {
    base-palette: ;
}

/* 7 */
@font-palette-values --A {
    override-colors: ident #123;
}

/* 8 */
@font-palette-values --A {
    override-colors: 0 "red";
}

/* 9 */
@font-palette-values --A {
    override-colors: 0 #123, 1;
}

/* 10 */
@font-palette-values --A {
    override-colors: ;
}

/* 11 */
@font-palette-values --A {
    override-colors: 0 #123 1;
}

/* 12 */
@font-palette-values --A {
    override-colors: 0;
}

/* 13 */
@font-palette-values --A {
    font-family: "";
}

/* 14 */
@font-palette-values --A {
    base-palette: initial;
    override-colors: initial;
}

/* 15 */
@font-palette-values --A {
    base-palette: inherit;
    override-colors: inherit;
}

/* 16 */
@font-palette-values --A {
    base-palette: unset;
    override-colors: unset;
}

/* 17 */
@font-palette-values --A {
    base-palette: -1;
    override-color: -1 #123;
}

/* 18 */
@font-palette-values --A {
    override-colors: 0 canvas;
}
</style>
</head>
<body>
<script>
let rules = document.getElementById("style").sheet.cssRules;
test(function() {
    assert_equals(rules.length, 19);
});

test(function() {
    let text = rules[0].cssText;
    let rule = rules[0];
    assert_equals(text.indexOf("font-family"), -1);
    assert_equals(rule.fontFamily, "");
    rule.fontFamily = "SomeFontFamily";
    assert_equals(rule.fontFamily, "");
    assert_equals(rule.basePalette, "");
    rule.basePalette = "7";
    assert_equals(rule.basePalette, "");
    assert_throws_js(TypeError, function() {
        rule.clear();
    });
    assert_throws_js(TypeError, function() {
        rule.delete(4);
    });
    assert_throws_js(TypeError, function() {
        rule.set(4, "0 #123");
    });
});

test(function() {
    let text = rules[1].cssText;
    let rule = rules[1];
    assert_equals(text.indexOf("font-family"), -1);
    assert_equals(rule.fontFamily, "");
});

test(function() {
    let text = rules[2].cssText;
    let rule = rules[2];
    assert_equals(text.indexOf("font:"), -1);
    assert_equals(rule.fontFamily, "");
});

test(function() {
    let text = rules[3].cssText;
    let rule = rules[3];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(rule.basePalette, "");
});

test(function() {
    let text = rules[4].cssText;
    let rule = rules[4];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(rule.basePalette, "");
});

test(function() {
    let text = rules[5].cssText;
    let rule = rules[5];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(rule.basePalette, "");
});

test(function() {
    let text = rules[6].cssText;
    let rule = rules[6];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(rule.basePalette, "");
});

test(function() {
    let text = rules[7].cssText;
    let rule = rules[7];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[8].cssText;
    let rule = rules[8];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[9].cssText;
    let rule = rules[9];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[10].cssText;
    let rule = rules[10];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[11].cssText;
    let rule = rules[11];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[12].cssText;
    let rule = rules[12];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[13].cssText;
    let rule = rules[13];
    // I see nothing in the spec that indicates an empty string is a parse error.
    assert_not_equals(text.indexOf("font-family"), -1);
});

test(function() {
    let text = rules[14].cssText;
    let rule = rules[14];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.basePalette, "");
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[15].cssText;
    let rule = rules[15];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.basePalette, "");
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[16].cssText;
    let rule = rules[16];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.basePalette, "");
    assert_equals(rule.overrideColors, "");
});

test(function() {
    assert_equals(CSSRule.FONT_PALETTE_VALUES_RULE, undefined);
});

test(function() {
    let text = rules[17].cssText;
    let rule = rules[17];
    assert_equals(text.indexOf("base-palette"), -1);
    assert_equals(text.indexOf("override-color"), -1);
    assert_equals(rule.basePalette, "");
    assert_equals(rule.overrideColors, "");
});

test(function() {
    let text = rules[18].cssText;
    let rule = rules[18];
    assert_equals(text.indexOf("override-colors"), -1);
    assert_equals(rule.basePalette, "");
    assert_equals(rule.overrideColors, "");
});
</script>
</body>
</html>