font-feature-settings-parsing.html | Explore in Territory

<html>
<head>
<style>
#valid_normal {
    -webkit-font-feature-settings: normal;
}

#valid_value_1 {
    -webkit-font-feature-settings: "dlig" 1;
}

#valid_value_2 {
    -webkit-font-feature-settings: "swsh" 2;
}

#valid_value_on {
    -webkit-font-feature-settings: "smcp" on;
}

#valid_value_off {
    -webkit-font-feature-settings: "liga" off;
}

#valid_value_omit {
    -webkit-font-feature-settings: "c2sc";
}

#valid_valuelist {
    -webkit-font-feature-settings: "tnum", 'hist';
}

#valid_singlequote {
    -webkit-font-feature-settings: 'PKRN';
}

#valid_unusual_tag {
    -webkit-font-feature-settings: "!@#$";
}

#valid_tag_space {
    -webkit-font-feature-settings: "a bc";
}

#valid_composite {
    -webkit-font-feature-settings: "dlig" 1, 'smcp' on, 'lig ' off;
}

#invalid_ident {
    -webkit-font-feature-settings: dlig;
}

#invalid_cases {
    -webkit-font-feature-settings: dlig, DLIG, DLig;
}

#invalid_1 {
    -webkit-font-feature-settings: 1;
}

#invalid_off {
    -webkit-font-feature-settings: off;
}

#invalid_normal_duplicate {
    -webkit-font-feature-settings: normal, normal;
}

#invalid_normal_list {
    -webkit-font-feature-settings: normal, aaaa;
}

#invalid_longer_ident {
    -webkit-font-feature-settings: aaaaa;
}

#invalid_longer_quote {
    -webkit-font-feature-settings: "aaaaa";
}

#invalid_negative {
    -webkit-font-feature-settings: aaaa -1;
}

#invalid_float {
    -webkit-font-feature-settings: aaaa 1.5;
}

#invalid_missing_comma {
    -webkit-font-feature-settings: aaaa "bbbb";
}

#invalid_missing_comma_ident {
    -webkit-font-feature-settings: aaaa bbbb;
}

#invalid_comma {
    -webkit-font-feature-settings: ,;
}

#invalid_ending_comma {
    -webkit-font-feature-settings: aaaa,;
}

#invalid_beginning_comma {
    -webkit-font-feature-settings: ,aaaa;
}

#invalid_on {
    -webkit-font-feature-settings: aaaa, on;
}

#invalid_0 {
    -webkit-font-feature-settings: "aaaa" 1, "bbbb", 0;
}

#invalid_composite {
    -webkit-font-feature-settings: aaaaa on, dlig on, PKRN -1;
}
</style>
<style>
@font-face {
    -webkit-font-feature-settings: 'liga';
}

@font-face {
    -webkit-font-feature-settings: aaaaa;
}
</style>
<script src="../resources/js-test.js"></script>
</head>
<body>
<div id="valid_normal"></div>
<div id="valid_value_1"></div>
<div id="valid_value_2"></div>
<div id="valid_value_on"></div>
<div id="valid_value_off"></div>
<div id="valid_value_omit"></div>
<div id="valid_valuelist"></div>
<div id="valid_singlequote"></div>
<div id="valid_unusual_tag"></div>
<div id="valid_tag_space"></div>
<div id="valid_composite"></div>

<div id="invalid_ident"></div>
<div id="invalid_cases"></div>
<div id="invalid_1"></div>
<div id="invalid_off"></div>
<div id="invalid_normal_duplicate"></div>
<div id="invalid_normal_list"></div>
<div id="invalid_longer_ident"></div>
<div id="invalid_longer_quote"></div>
<div id="invalid_negative"></div>
<div id="invalid_float"></div>
<div id="invalid_missing_comma"></div>
<div id="invalid_missing_comma_ident"></div>
<div id="invalid_comma"></div>
<div id="invalid_ending_comma"></div>
<div id="invalid_beginning_comma"></div>
<div id="invalid_on"></div>
<div id="invalid_0"></div>

<div id="outer" style="-webkit-font-feature-settings: 'dlig';">
  <div id="inner"></div>
</div>

<p id="description"></p>
<div id="console"></div>
<script>
description('Test parsing of the CSS3 font-feature-settings property.');

function parseResultOf(id) {
    var element = document.getElementById(id);
    return window.getComputedStyle(element)['-webkit-font-feature-settings'];
}

debug('- Tests valid inputs.');
shouldBeEqualToString('parseResultOf("valid_normal")', "normal");
shouldBeEqualToString('parseResultOf("valid_value_1")', '"dlig"');
shouldBeEqualToString('parseResultOf("valid_value_2")', '"swsh" 2');
shouldBeEqualToString('parseResultOf("valid_value_on")', '"smcp"');
shouldBeEqualToString('parseResultOf("valid_value_off")', '"liga" 0');
shouldBeEqualToString('parseResultOf("valid_value_omit")', '"c2sc"');
shouldBeEqualToString('parseResultOf("valid_valuelist")', '"tnum", "hist"');
shouldBeEqualToString('parseResultOf("valid_singlequote")', '"PKRN"');
shouldBeEqualToString('parseResultOf("valid_unusual_tag")', '"!@#$"');
shouldBeEqualToString('parseResultOf("valid_tag_space")', '"a bc"');
shouldBeEqualToString('parseResultOf("valid_composite")', '"dlig", "smcp", "lig " 0');

debug('- Tests invalid inputs.  Results should be "normal".');
shouldBe('parseResultOf("invalid_ident")', '"normal"');
shouldBe('parseResultOf("invalid_cases")', '"normal"');
shouldBe('parseResultOf("invalid_1")', '"normal"');
shouldBe('parseResultOf("invalid_off")', '"normal"');
shouldBe('parseResultOf("invalid_normal_duplicate")', '"normal"');
shouldBe('parseResultOf("invalid_normal_list")', '"normal"');
shouldBe('parseResultOf("invalid_longer_ident")', '"normal"');
shouldBe('parseResultOf("invalid_longer_quote")', '"normal"');
shouldBe('parseResultOf("invalid_negative")', '"normal"');
shouldBe('parseResultOf("invalid_float")', '"normal"');
shouldBe('parseResultOf("invalid_missing_comma")', '"normal"');
shouldBe('parseResultOf("invalid_missing_comma_ident")', '"normal"');
shouldBe('parseResultOf("invalid_comma")', '"normal"');
shouldBe('parseResultOf("invalid_ending_comma")', '"normal"');
shouldBe('parseResultOf("invalid_beginning_comma")', '"normal"');
shouldBe('parseResultOf("invalid_on")', '"normal"');
shouldBe('parseResultOf("invalid_0")', '"normal"');

debug('- Tests inherit.');
shouldBeEqualToString('parseResultOf("outer")', '"dlig"');
shouldBeEqualToString('parseResultOf("inner")', '"dlig"');

debug('- Tests @font-face.');
var fontFaceRuleValid = document.styleSheets[1].cssRules[0].style['-webkit-font-feature-settings'];
var fontFaceRuleInvalid = document.styleSheets[1].cssRules[1].style['-webkit-font-feature-settings'];
shouldBeEqualToString('fontFaceRuleValid', '"liga"');
shouldBeEqualToString('fontFaceRuleInvalid', "");

</script>
</body>
</html>
chromium/third_party/blink/web_tests/css3/font-feature-settings-parsing.html
