<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div style="font: 16px/18px 'Times';">
<div id="test1"></div>
<div id="test2" style="font-stretch: 1%;"></div>
<div id="test3" style="font-stretch: 2;"></div>
<div id="test4" style="font-stretch: ultra-condensed;"></div>
<div id="test5" style="font-stretch: extra-condensed;"></div>
<div id="test6" style="font-stretch: condensed;"></div>
<div id="test7" style="font-stretch: semi-condensed;"></div>
<div id="test8" style="font-stretch: normal;"></div>
<div id="test9" style="font-stretch: semi-expanded;"></div>
<div id="test10" style="font-stretch: expanded;"></div>
<div id="test11" style="font-stretch: extra-expanded;"></div>
<div id="test12" style="font-stretch: ultra-expanded;"></div>
<div id="test13" style="font-stretch: garbage;"></div>
<div id="test14" style="font-stretch: initial;"></div>
<div id="test15" style="font-stretch: calc(3 + 4);"></div>
<div id="test16" style="font: 100 extra-condensed 48px/49px 'Helvetica Neue';"></div>
<div id="test17" style="font: extra-condensed 100 48px/49px 'Helvetica Neue';"></div>
<div id="test18" style="font: 100 48px/49px 'Helvetica Neue';"></div>
<div style="font-stretch: extra-expanded;"><div id="test19" style="font: 100 48px/49px 'Helvetica Neue';"></div></div>
<div id="test20" style="font: italic small-caps 100 extra-expanded 48px/49px 'Helvetica Neue';"></div>
<div id="test21" style="font-stretch: calc(3% + 4%);"></div>
</div>
<script>
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).fontStretch", "1%");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).fontStretch", "ultra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).fontStretch", "condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).fontStretch", "semi-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test8')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test9')).fontStretch", "semi-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test10')).fontStretch", "expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test11')).fontStretch", "extra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test12')).fontStretch", "ultra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test13')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test14')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test15')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test16')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test17')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test18')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test19')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test20')).fontStretch", "extra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test21')).fontStretch", "7%");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).font", "16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).font", "normal normal normal ultra-condensed 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).font", "normal normal normal extra-condensed 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).font", "normal normal normal condensed 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).font", "normal normal normal semi-condensed 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test8')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test9')).font", "normal normal normal semi-expanded 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test10')).font", "normal normal normal expanded 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test11')).font", "normal normal normal extra-expanded 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test12')).font", "normal normal normal ultra-expanded 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test13')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test14')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test15')).font", "normal normal normal normal 16px/18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test16')).font", `normal normal 100 extra-condensed 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test17')).font", `normal normal 100 extra-condensed 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test18')).font", `normal normal 100 normal 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test19')).font", `normal normal 100 normal 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test20')).font", `italic small-caps 100 extra-expanded 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test21')).font", "16px/18px Times");

shouldBeEqualToString("document.getElementById('test1').style.font", "");
shouldBeEqualToString("document.getElementById('test16').style.font", `100 extra-condensed 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("document.getElementById('test17').style.font", `100 extra-condensed 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("document.getElementById('test18').style.font", `100 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("document.getElementById('test19').style.font", `100 48px/49px "Helvetica Neue"`);
shouldBeEqualToString("document.getElementById('test20').style.font", `italic small-caps 100 extra-expanded 48px/49px "Helvetica Neue"`);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>