blob: 5208dae44c15a14f34e428b124906932fe077458 [file] [log] [blame]
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=320">
<script>
if (window.internals) {
internals.settings.setMinimumFontSize(32);
internals.settings.setTextAutosizingEnabled(true);
internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
}
</script>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body style="-webkit-text-size-adjust: 200%;">
<div id="reference1" style="-webkit-text-size-adjust: 100%; font-size: 16px; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="reference2" style="-webkit-text-size-adjust: 100%; font-size: 40px; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="reference3" style="-webkit-text-size-adjust: 100%; font-size: 20px; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test1" style="font-size: 8px; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test2" style="font-size: 20px; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test3" style="font-size: x-small; line-height: normal;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test4" style="font-size: 8px; line-height: 12px;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test5" style="font-size: 20px; line-height: 25px;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test6" style="font-size: x-small; line-height: 15px;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test7" style="font-size: 8px; line-height: 150%;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test8" style="font-size: 20px; line-height: 150%;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test9" style="font-size: x-small; line-height: 150%;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test10" style="font-size: 8px; line-height: 1.5;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test11" style="font-size: 20px; line-height: 1.5;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<div id="test12" style="font-size: x-small; line-height: 1.5;">This text should have a decent spacing between the lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante orci, posuere at aliquam eget, ornare ut sapien. Praesent commodo volutpat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum tincidunt pulvinar. Donec nec libero eros. Morbi facilisis lacus quis mi mattis quis pretium velit fringilla. Integer ipsum metus, pretium et tincidunt eget, commodo vel nibh. Cras feugiat lorem et velit interdum eu luctus dui gravida. Nullam nec gravida orci. Vestibulum quis imperdiet nibh. Vivamus tincidunt erat ac risus egestas mattis.</div>
<script>
description("This test makes sure that webkit text autosizing does not obey the minimumFontSize setting.");
var comparisonLineHeight1 = parseFloat(window.getComputedStyle(document.getElementById('reference1')).getPropertyValue('line-height'));
var comparisonLineHeight2 = parseFloat(window.getComputedStyle(document.getElementById('reference2')).getPropertyValue('line-height'));
var comparisonLineHeight3 = parseFloat(window.getComputedStyle(document.getElementById('reference3')).getPropertyValue('line-height'));
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-size'))", "8 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test1')).getPropertyValue('line-height'))", "comparisonLineHeight1");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-size'))", "20 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test2')).getPropertyValue('line-height'))", "comparisonLineHeight2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-size'))", "10 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test3')).getPropertyValue('line-height'))", "comparisonLineHeight3");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-size'))", "8 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test4')).getPropertyValue('line-height'))", "(32 / (2 * 8)) * 12");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test5')).getPropertyValue('font-size'))", "20 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test5')).getPropertyValue('line-height'))", "25 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test6')).getPropertyValue('font-size'))", "10 * 2");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test6')).getPropertyValue('line-height'))", "(32 / (2 * 10)) * 15");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test7')).getPropertyValue('line-height'))", "8 * 2 * 1.5");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test8')).getPropertyValue('line-height'))", "20 * 2 * 1.5");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test9')).getPropertyValue('line-height'))", "10 * 2 * 1.5");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test10')).getPropertyValue('line-height'))", "8 * 2 * 1.5");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test11')).getPropertyValue('line-height'))", "20 * 2 * 1.5");
shouldBe("parseFloat(window.getComputedStyle(document.getElementById('test12')).getPropertyValue('line-height'))", "10 * 2 * 1.5");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>