<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@font-face {
  font-feature-settings:'smcp' 1;
}
@font-face {
  -webkit-font-feature-settings:'smcp' 1;
}
</style>
<div style='font-feature-settings:"smcp" 1'></div>
<div style='-webkit-font-feature-settings:"smcp" 1'></div>
<script>
var expected = '"smcp"';

var style = document.createElement("foo").style;
test(function () {
  assert_true("fontFeatureSettings" in style);
}, "'fontFeatureSettings' in style");
test(function () {
  assert_true("webkitFontFeatureSettings" in style);
}, "'webkitFontFeatureSettings' in style");

Array.prototype.forEach.call(document.styleSheets[0].cssRules, function (fontFaceRule) {
  testFontFeatureSettings(fontFaceRule.style, fontFaceRule.cssText);
});

Array.prototype.forEach.call(document.querySelectorAll("div[style]"), function (element) {
  testFontFeatureSettings(getComputedStyle(element), element.getAttribute("style"));
});

function testFontFeatureSettings(style, title) {
  test(function () {
    assert_equals(style.fontFeatureSettings, expected);
  }, "fontFeatureSettings of '" + title + "' should be '" + expected + "'");
  test(function () {
    assert_equals(style.webkitFontFeatureSettings, expected);
  }, "webkitFontFeatureSettings of '" + title + "' should be '" + expected + "'");
}
</script>