| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <title>CSSOM - CSSFontFeatureValuesRule interface</title> |
| <link |
| rel="help" |
| href="https://drafts.csswg.org/css-fonts-4/#om-fontfeaturevalues" |
| /> |
| <link rel="author" title="Dominik Röttsches" href="drott@chromium.org" /> |
| <meta |
| name="assert" |
| content="CSSFontFeatureValuesRule interface is accessible and supports read and write access." |
| /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style></style> |
| <body></body> |
| <script> |
| let rule_initial = ` |
| @font-feature-values test_family { |
| @annotation { |
| the_first: 6; |
| } |
| @styleset { |
| yo: 7; |
| del: 4; |
| di: 10 9 4 5; |
| } |
| } |
| `; |
| |
| let rule_added = ` |
| @font-feature-values second_family { |
| @annotation { |
| yabab: 2; |
| yogog: 4; |
| bidib: 5; |
| } |
| } |
| `; |
| |
| let rule_overlap = ` |
| @font-feature-values test_family { |
| @annotation { |
| baric: 17; |
| } |
| @ornaments { |
| fooic: 1; |
| } |
| } |
| `; |
| |
| function resetStateAndTest(testFunction) { |
| var sheet = document.styleSheets[0]; |
| while (sheet.cssRules.length > 0) sheet.deleteRule(0); |
| sheet.insertRule(rule_initial); |
| testFunction(); |
| } |
| |
| test(function () { |
| resetStateAndTest(() => { |
| let rule = document.styleSheets[0].cssRules[0]; |
| assert_equals(rule.type, 14); |
| assert_equals(rule.annotation.size, 1); |
| assert_equals(rule.styleset.size, 3); |
| assert_array_equals(rule.styleset.get("yo"), [7]); |
| assert_array_equals(rule.styleset.get("del"), [4]); |
| assert_array_equals(rule.styleset.get("di"), [10, 9, 4, 5]); |
| assert_array_equals(rule.annotation.get("the_first"), [6]); |
| assert_equals(rule.stylistic.size, 0); |
| assert_equals(rule.swash.size, 0); |
| assert_equals(rule.ornaments.size, 0); |
| assert_equals(rule.characterVariant.size, 0); |
| assert_equals(rule.fontFamily, "test_family"); |
| }); |
| }, "CSSFontFeatureValuesRule is correctly parsed and accessible via CSSOM."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| let family_override = "test_changed_family"; |
| let rule = document.styleSheets[0].cssRules[0]; |
| rule.fontFamily = family_override; |
| let read_rule = document.styleSheets[0].cssRules[0]; |
| assert_equals(read_rule.fontFamily, family_override); |
| }); |
| }, "CSSFontFeatureValuesRule family is settable and readable."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| let rule = document.styleSheets[0].cssRules[0]; |
| let override_number = 43; |
| assert_equals(rule.styleset.get("di").length, 4); |
| rule.styleset.set("di", override_number); |
| assert_array_equals( |
| document.styleSheets[0].cssRules[0].styleset.get("di"), |
| [override_number] |
| ); |
| assert_equals(rule.styleset.size, 3); |
| assert_equals( |
| document.styleSheets[0].cssRules[0].styleset.get("di").length, |
| 1 |
| ); |
| }); |
| }, "CSSFontFeatureValuesMap entries are settable to single values."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| let rule = document.styleSheets[0].cssRules[0]; |
| let override_sequence = [43, 22]; |
| assert_equals( |
| document.styleSheets[0].cssRules[0].styleset.get("di").length, |
| 4 |
| ); |
| rule.styleset.set("di", override_sequence); |
| assert_array_equals( |
| document.styleSheets[0].cssRules[0].styleset.get("di"), |
| override_sequence |
| ); |
| assert_equals(document.styleSheets[0].cssRules[0].styleset.size, 3); |
| assert_equals( |
| document.styleSheets[0].cssRules[0].styleset.get("di").length, |
| 2 |
| ); |
| }); |
| }, "CSSFontFeatureValuesMap entries are settable to sequences of numbers."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| document.styleSheets[0].insertRule(rule_added, 1); |
| assert_equals(document.styleSheets[0].cssRules[1].type, 14); |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 3); |
| }); |
| }, "New rules can be added."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| document.styleSheets[0].insertRule(rule_added, 1); |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 3); |
| document.styleSheets[0].cssRules[1].annotation.delete("yogog"); |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 2); |
| }); |
| }, "Deleting single entries is possible."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| document.styleSheets[0].insertRule(rule_added, 1); |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 3); |
| document.styleSheets[0].cssRules[1].annotation.clear(); |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 0); |
| }); |
| }, "Clearing all entries is possible."); |
| |
| test(function () { |
| resetStateAndTest(() => { |
| assert_equals(document.styleSheets[0].cssRules.length, 1); |
| document.styleSheets[0].insertRule(rule_overlap, 1); |
| assert_equals(document.styleSheets[0].cssRules.length, 2); |
| |
| // Force updating internal state. |
| getComputedStyle(document.body).borderTop; |
| |
| assert_equals( |
| document.styleSheets[0].cssRules[0].annotation.size, |
| 1, |
| "1 annotation." |
| ); |
| assert_equals( |
| document.styleSheets[0].cssRules[0].styleset.size, |
| 3, |
| "3 entries in styleset." |
| ); |
| assert_equals( |
| document.styleSheets[0].cssRules[0].ornaments.size, |
| 0, |
| "No ornament entries." |
| ); |
| assert_false( |
| document.styleSheets[0].cssRules[0].annotation.has("baric"), |
| "Annotation must not contain 'baric'." |
| ); |
| assert_false( |
| document.styleSheets[0].cssRules[0].ornaments.has("fooic"), |
| "Ornaments must not contain 'fooic'." |
| ); |
| |
| assert_equals(document.styleSheets[0].cssRules[1].annotation.size, 1); |
| assert_equals(document.styleSheets[0].cssRules[1].ornaments.size, 1); |
| assert_false( |
| document.styleSheets[0].cssRules[1].annotation.has("the_first") |
| ); |
| }); |
| }, "Multiple rules for the same family are kept separate in CSSOM."); |
| </script> |
