<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
.test {
    font: 30px Times;
    display: none;
}
#t1 {
    font-variant-caps: small-caps;
}
#t2 {
    font-variant: small-caps;
}
#t3 {
    font: small-caps 30px Times;
}
#t4 {
    font-variant: normal;
    font: small-caps 30px Times;
}
#t5 {
    font-variant-caps: normal;
    font: small-caps 30px Times;
}
#t6 {
    font: 30px Times;
    font-variant-caps: small-caps;
}
#t7 {
    font-variant: normal;
    font-variant-caps: small-caps;
}
#t8 {
    font-variant-caps: normal;
    font-variant: small-caps;
}
#t9 {
    font: 30px Times;
    font-variant: small-caps;
}
#t10 {
    font-variant: small-caps;
    font: 30px Times;
}
#t11 {
    font-variant-caps: small-caps;
    font: 30px Times;
}
#t12 {
    font: small-caps 30px Times;
    font-variant-caps: normal;
}
#t13 {
    font-variant: small-caps;
    font-variant-caps: normal;
}
#t14 {
    font-variant-caps: small-caps;
    font-variant: normal;
}
#t15 {
    font: small-caps 30px Times;
    font-variant: normal;
}
#t16 {
    font-variant-ligatures: common-ligatures;
    font-variant-position: super;
    font-variant-caps: small-caps;
    font-variant-numeric: lining-nums;
    font-variant-alternates: historical-forms;
    font-variant-east-asian: simplified;
}
#t17-container {
    font-variant-ligatures: common-ligatures;
    font-variant-position: super;
    font-variant-caps: small-caps;
    font-variant-numeric: lining-nums;
    font-variant-alternates: historical-forms;
    font-variant-east-asian: simplified;
}
#t17 {
    font-variant: normal;
}
#t18-container {
    font-variant-ligatures: common-ligatures;
    font-variant-position: super;
    font-variant-caps: small-caps;
    font-variant-numeric: lining-nums;
    font-variant-alternates: historical-forms;
    font-variant-east-asian: simplified;
}
#t18 {
    font-variant: none;
}
#t20 {
    font-variant: simplified common-ligatures;
}
#t21 {
    font-variant-east-asian: full-width garbage;
}
#t22 {
    font-variant-east-asian: full-width none;
}
#t23 {
    font-variant-east-asian: garbage full-width;
}
#t24 {
    font-variant-alternates: historical-forms historical-forms;
}
</style>
</head>
<body>

<div class="test" id="t1">Hello</div>
<div class="test" id="t2">Hello</div>
<div class="test" id="t3">Hello</div>
<div class="test" id="t4">Hello</div>
<div class="test" id="t5">Hello</div>
<div class="test" id="t6">Hello</div>
<div class="test" id="t7">Hello</div>
<div class="test" id="t8">Hello</div>
<div class="test" id="t9">Hello</div>
<div class="test" id="t10">Hello</div>
<div class="test" id="t11">Hello</div>
<div class="test" id="t12">Hello</div>
<div class="test" id="t13">Hello</div>
<div class="test" id="t14">Hello</div>
<div class="test" id="t15">Hello</div>
<div class="test" id="t16">Hello</div>
<div class="test" id="t17-container"><div id="t17">Hello</div></div>
<div class="test" id="t18-container"><div id="t18">Hello</div></div>
<div class="test" id="t19">Hello</div>
<div class="test" id="t20">Hello</div>
<div class="test" id="t21">Hello</div>
<div class="test" id="t22">Hello</div>
<div class="test" id="t23">Hello</div>
<div class="test" id="t24">Hello</div>
<script>
description("This test makes sure that the two shorthand properties which set font-variant-caps get resolved correctly.");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t1')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t2')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t3')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t4')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t5')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t6')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t7')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t8')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t9')).getPropertyValue('font-variant-caps')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t10')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t11')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t12')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t13')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t14')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t15')).getPropertyValue('font-variant-caps')", "normal");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('t1')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t2')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t3')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t4')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t5')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t6')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t7')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t8')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t9')).getPropertyValue('font-variant')", "small-caps");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t10')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t11')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t12')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t13')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t14')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t15')).getPropertyValue('font-variant')", "normal");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('t16')).getPropertyValue('font-variant')", "common-ligatures small-caps historical-forms lining-nums simplified super");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t17')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t18')).getPropertyValue('font-variant')", "none");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t19')).getPropertyValue('font-variant')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t19')).getPropertyValue('font-variant-caps')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t20')).getPropertyValue('font-variant')", "common-ligatures simplified");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t21')).getPropertyValue('font-variant-east-asian')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t22')).getPropertyValue('font-variant-east-asian')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t23')).getPropertyValue('font-variant-east-asian')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('t24')).getPropertyValue('font-variant-alternates')", "normal");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>
