Commit 086d0e78 authored by commit-queue@webkit.org's avatar commit-queue@webkit.org
Browse files

Text Autosizing: Add explanations to tests.

https://bugs.webkit.org/show_bug.cgi?id=96673

Patch by John Mellor <johnme@chromium.org> on 2012-09-13
Reviewed by Julien Chaffraix.

Replaces some of the lorem ipsum filler text in Text Autosizing tests
with explanations of why the result is expected (and other minor tweaks
to tests).

* fast/text-autosizing/font-scale-factor-expected.html:
* fast/text-autosizing/font-scale-factor.html:
* fast/text-autosizing/narrow-iframe-expected.html:
* fast/text-autosizing/narrow-iframe-flattened-expected.html:
* fast/text-autosizing/narrow-iframe-flattened.html:
* fast/text-autosizing/narrow-iframe.html:
* fast/text-autosizing/nested-em-line-height-expected.html:
* fast/text-autosizing/nested-em-line-height.html:
* fast/text-autosizing/simple-paragraph-expected.html:
* fast/text-autosizing/simple-paragraph.html:
* fast/text-autosizing/span-child-expected.html:
* fast/text-autosizing/span-child.html:
* fast/text-autosizing/various-font-sizes-expected.html:
* fast/text-autosizing/various-font-sizes.html:
* fast/text-autosizing/wide-block-expected.html:
* fast/text-autosizing/wide-block.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@128500 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent a2458aad
2012-09-13 John Mellor <johnme@chromium.org>
Text Autosizing: Add explanations to tests.
https://bugs.webkit.org/show_bug.cgi?id=96673
Reviewed by Julien Chaffraix.
Replaces some of the lorem ipsum filler text in Text Autosizing tests
with explanations of why the result is expected (and other minor tweaks
to tests).
* fast/text-autosizing/font-scale-factor-expected.html:
* fast/text-autosizing/font-scale-factor.html:
* fast/text-autosizing/narrow-iframe-expected.html:
* fast/text-autosizing/narrow-iframe-flattened-expected.html:
* fast/text-autosizing/narrow-iframe-flattened.html:
* fast/text-autosizing/narrow-iframe.html:
* fast/text-autosizing/nested-em-line-height-expected.html:
* fast/text-autosizing/nested-em-line-height.html:
* fast/text-autosizing/simple-paragraph-expected.html:
* fast/text-autosizing/simple-paragraph.html:
* fast/text-autosizing/span-child-expected.html:
* fast/text-autosizing/span-child.html:
* fast/text-autosizing/various-font-sizes-expected.html:
* fast/text-autosizing/various-font-sizes.html:
* fast/text-autosizing/wide-block-expected.html:
* fast/text-autosizing/wide-block.html:
2012-09-13 Sudarsana Nagineni <sudarsana.nagineni@linux.intel.com>
 
[WK2][WTR] WebKitTestRunner needs testRunner.callShouldCloseOnWebView
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=800" />
<style>
body {
width: 800px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div style="font-size: 5rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien sapien, tempus id egestas a, consectetur et felis. Ut pharetra mi eget lectus laoreet rutrum. Mauris tellus odio, egestas vitae sodales in, vehicula eget ante. Pellentesque id egestas arcu. Quisque tellus quam, rhoncus ac elementum vel, volutpat vel felis. Aliquam ut leo dolor, eget egestas tellus. Nunc ut velit gravida nisl fringilla rutrum eget at arcu. Vivamus et pretium mauris.</div>
</body>
<head>
<meta name="viewport" content="width=800">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
</head>
<body>
<div style="font-size: 5rem">
This text should be autosized to 80px computed font-size (16 * 800/320 * 2, where 2 is the fontScaleFactor).<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien sapien, tempus id egestas a, consectetur et felis. Ut pharetra mi eget lectus laoreet rutrum. Mauris tellus odio, egestas vitae sodales in, vehicula eget ante. Pellentesque id egestas arcu. Quisque tellus quam, rhoncus ac elementum vel, volutpat vel felis. Aliquam ut leo dolor, eget egestas tellus. Nunc ut velit gravida nisl fringilla rutrum eget at arcu. Vivamus et pretium mauris.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=800" />
<style>
body {
width: 800px;
margin: 0px;
overflow: hidden; /* Vertical scrollbar makes it harder to write expected.html */
}
</style>
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
window.internals.settings.setTextAutosizingFontScaleFactor(2);
} else {
console.warn("Please use DumpRenderTree to run this test.");
}
</script>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien sapien, tempus id egestas a, consectetur et felis. Ut pharetra mi eget lectus laoreet rutrum. Mauris tellus odio, egestas vitae sodales in, vehicula eget ante. Pellentesque id egestas arcu. Quisque tellus quam, rhoncus ac elementum vel, volutpat vel felis. Aliquam ut leo dolor, eget egestas tellus. Nunc ut velit gravida nisl fringilla rutrum eget at arcu. Vivamus et pretium mauris.</div>
</body>
<head>
<meta name="viewport" content="width=800">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
window.internals.settings.setTextAutosizingFontScaleFactor(2);
} else {
console.warn("Please use DumpRenderTree to run this test.");
}
</script>
</head>
<body>
<div>
This text should be autosized to 80px computed font-size (16 * 800/320 * 2, where 2 is the fontScaleFactor).<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien sapien, tempus id egestas a, consectetur et felis. Ut pharetra mi eget lectus laoreet rutrum. Mauris tellus odio, egestas vitae sodales in, vehicula eget ante. Pellentesque id egestas arcu. Quisque tellus quam, rhoncus ac elementum vel, volutpat vel felis. Aliquam ut leo dolor, eget egestas tellus. Nunc ut velit gravida nisl fringilla rutrum eget at arcu. Vivamus et pretium mauris.
</div>
</body>
</html>
......@@ -3,15 +3,16 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
body { width: 800px; margin: 0; overflow-y: hidden; }
<style>
body { width: 800px; margin: 0; }
</style>
</head>
<body>
<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 1.25rem">
<iframe style="width: 50%; height: 300px; border: 0" src='data:text/html,
<html style="font-size: 16px"><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 1.25rem">
This text should be autosized to just 20px computed font size, i.e. scaled up by 1.25x, since although this block is 1600px wide, it is in a 400px wide iframe, and min(1600, 400, 800) / 320 = 1.25.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>'>
......
......@@ -3,15 +3,16 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
</head>
<body>
<iframe style="width: 100%; height: 50%; border: 0" src='data:text/html,
<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 2.5rem">
<iframe style="width: 100%; height: 300px; border: 0" src='data:text/html,
<html style="font-size: 16px"><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px; font-size: 2.5rem">
This text should be autosized to 40px computed font size, i.e. scaled up by 2.5x, since although this block is 1600px wide, and is in a 400px wide iframe, the iframe is flattened so it will expand to the width of its containing block (800px), and min(1600, 800) / 320 = 2.5.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>'>
......
......@@ -3,11 +3,11 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -21,8 +21,9 @@ if (window.testRunner)
</head>
<body>
<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
<iframe style="width: 50%; height: 300px; border: 0" src='data:text/html,
<html style="font-size: 16px"><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
This text should be autosized to 40px computed font size, i.e. scaled up by 2.5x, since although this block is 1600px wide, and is in a 400px wide iframe, the iframe is flattened so it will expand to the width of its containing block (800px), and min(1600, 800) / 320 = 2.5.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>'>
......
......@@ -3,11 +3,11 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
body { width: 800px; margin: 0; overflow-y: hidden; }
<style>
body { width: 800px; margin: 0; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -19,8 +19,9 @@ if (window.internals) {
</head>
<body>
<iframe style="width: 50%; height: 50%; border: 0" src='data:text/html,
<html><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
<iframe style="width: 50%; height: 300px; border: 0" src='data:text/html,
<html style="font-size: 16px"><body style="margin: 0; overflow-y: hidden"><div style="width: 1600px">
This text should be autosized to just 20px computed font size, i.e. scaled up by 1.25x, since although this block is 1600px wide, it is in a 400px wide iframe, and min(1600, 400, 800) / 320 = 1.25.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>'>
......
......@@ -3,7 +3,8 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
......@@ -11,7 +12,7 @@ body { width: 800px; margin: 0; }
<body>
<div style="font-size: 2.5rem; line-height: 1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
When this text is autosized to 40px, the line heights of the nested inline elements below should increase in strict proportion.
<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<b><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i></b>
......
......@@ -3,11 +3,12 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -20,7 +21,7 @@ if (window.internals) {
<body>
<div style="line-height: 1em">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
When this text is autosized to 40px, the line heights of the nested inline elements below should increase in strict proportion.
<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<b><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i></b>
......
......@@ -3,7 +3,8 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
......@@ -11,6 +12,7 @@ body { width: 800px; margin: 0; }
<body>
<div style="font-size: 2.5rem">
This text should be autosized to 40px computed font-size (16 * 800/320).<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
......
......@@ -3,11 +3,12 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -20,6 +21,7 @@ if (window.internals) {
<body>
<div>
This text should be autosized to 40px computed font-size (16 * 800/320).<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
......
......@@ -3,7 +3,8 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
......@@ -11,7 +12,7 @@ body { width: 800px; margin: 0; }
<body>
<div style="font-size: 2.5rem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This text should all be autosized to 40px computed font-size; the span below shouldn't affect this.
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
......
......@@ -3,11 +3,12 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -20,7 +21,7 @@ if (window.internals) {
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This text should all be autosized to 40px computed font-size; the span below shouldn't affect this.
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
......
......@@ -3,24 +3,27 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
body { width: 800px; margin: 0; }
<style>
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
</head>
<body>
<div style="font-size: 20px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This should be scaled by 2.5x to become 20px (since it was small, it got fully multiplied).
</div>
<div style="font-size: 40px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This should be scaled by 2.5x to become 40px (since it was small, it got fully multiplied).
</div>
<div style="font-size: 48px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
This should be scaled by 1.5x to become 48px (since it was medium size, it got multiplied less).
</div>
<div style="font-size: 56px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
This should be scaled by 1.17x to become 56px (since it was large, it got multiplied much less).
</div>
<div style="font-size: 64px">
This should not be scaled at all, hence remain 64px (since it was huge, it didn't get multiplied at all).
</div>
</body>
......
......@@ -3,11 +3,11 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
body { width: 800px; margin: 0; }
<style>
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -20,16 +20,19 @@ if (window.internals) {
<body>
<div style="font-size: 8px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This should be scaled by 2.5x to become 20px (since it was small, it got fully multiplied).
</div>
<div style="font-size: 16px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This should be scaled by 2.5x to become 40px (since it was small, it got fully multiplied).
</div>
<div style="font-size: 32px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
This should be scaled by 1.5x to become 48px (since it was medium size, it got multiplied less).
</div>
<div style="font-size: 48px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
This should be scaled by 1.17x to become 56px (since it was large, it got multiplied much less).
</div>
<div style="font-size: 64px">
This should not be scaled at all, hence remain 64px (since it was huge, it didn't get multiplied at all).
</div>
</body>
......
......@@ -3,7 +3,8 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
......@@ -11,6 +12,7 @@ body { width: 800px; margin: 0; overflow-y: hidden; }
<body>
<div style="width: 1600px; font-size: 2.5rem">
This text should be autosized to just 40px computed font size, i.e. scaled up by 2.5x, since although this block is 1600px wide, the window is only 800px, and min(1600, 800) / 320 = 2.5.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
......
......@@ -3,11 +3,12 @@
<head>
<meta name="viewport" content="width=800">
<style type="text/css">
<style>
html { font-size: 16px; }
body { width: 800px; margin: 0; overflow-y: hidden; }
</style>
<script type="text/javascript">
<script>
if (window.internals) {
window.internals.settings.setTextAutosizingEnabled(true);
window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
......@@ -20,6 +21,7 @@ if (window.internals) {
<body>
<div style="width: 1600px">
This text should be autosized to just 40px computed font size, i.e. scaled up by 2.5x, since although this block is 1600px wide, the window is only 800px, and min(1600, 800) / 320 = 2.5.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment