<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="test1">Hello</div>
<div id="test2" style="font-optical-sizing: initial;">Hello</div>
<div id="test3" style="font-optical-sizing: auto;">Hello</div>
<div id="test4" style="font-optical-sizing: none;">Hello</div>
<div style="font-optical-sizing: none;"><div id="test5" style="font-optical-sizing: inherit;">Hello</div></div>

<script>
description("This test makes sure that font-optical-sizing works as expected.");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-optical-sizing')", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-optical-sizing')", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-optical-sizing')", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-optical-sizing')", "none");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).getPropertyValue('font-optical-sizing')", "none");

shouldBeEqualToString("document.getElementById('test1').style.fontOpticalSizing", "");
shouldBeEqualToString("document.getElementById('test2').style.fontOpticalSizing", "initial");
shouldBeEqualToString("document.getElementById('test3').style.fontOpticalSizing", "auto");
shouldBeEqualToString("document.getElementById('test4').style.fontOpticalSizing", "none");
shouldBeEqualToString("document.getElementById('test5').style.fontOpticalSizing", "inherit");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).fontOpticalSizing", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).fontOpticalSizing", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).fontOpticalSizing", "auto");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).fontOpticalSizing", "none");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).fontOpticalSizing", "none");

var computedStyle = window.getComputedStyle(document.getElementById('test1'));
var found = false;
for (let i = 0; i < computedStyle.length; ++i) {
    if (computedStyle[i] == "font-optical-sizing") {
        found = true;
        testPassed("Found optical sizing");
        break;
    }
}
if (!found)
    testFailed("Didn't find optical sizing");
</script>

<script src="../../../resources/js-test-post.js"></script>
</body>
</html>