| <!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> |
