diff options
Diffstat (limited to 'layout/reftests/font-inflation')
174 files changed, 3267 insertions, 0 deletions
diff --git a/layout/reftests/font-inflation/bug707855-innerFrame-ref.html b/layout/reftests/font-inflation/bug707855-innerFrame-ref.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/layout/reftests/font-inflation/bug707855-innerFrame-ref.html diff --git a/layout/reftests/font-inflation/bug707855-innerFrame.html b/layout/reftests/font-inflation/bug707855-innerFrame.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/layout/reftests/font-inflation/bug707855-innerFrame.html diff --git a/layout/reftests/font-inflation/bug707855-ref.html b/layout/reftests/font-inflation/bug707855-ref.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/layout/reftests/font-inflation/bug707855-ref.html diff --git a/layout/reftests/font-inflation/bug707855.html b/layout/reftests/font-inflation/bug707855.html new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/layout/reftests/font-inflation/bug707855.html diff --git a/layout/reftests/font-inflation/bullet-1-ref.html b/layout/reftests/font-inflation/bullet-1-ref.html new file mode 100644 index 0000000000..6f87b94075 --- /dev/null +++ b/layout/reftests/font-inflation/bullet-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<style> +ul, li { line-height: 1.0; font-size: 35px; } +ul { width: 500px; margin: 0; padding: 0 } +li { margin: 0 0 0 50px; padding: 0 } +</style> +<ul> + <li>item</li> +</ul> diff --git a/layout/reftests/font-inflation/bullet-1.html b/layout/reftests/font-inflation/bullet-1.html new file mode 100644 index 0000000000..6433753fd6 --- /dev/null +++ b/layout/reftests/font-inflation/bullet-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<style> +ul, li { line-height: 1.0; font-size: 15px; } +ul { width: 500px; margin: 0; padding: 0 } +li { margin: 0 0 0 50px; padding: 0 } +</style> +<ul> + <li>item</li> +</ul> diff --git a/layout/reftests/font-inflation/consecutive-inline-ref.html b/layout/reftests/font-inflation/consecutive-inline-ref.html new file mode 100644 index 0000000000..9d5d163f01 --- /dev/null +++ b/layout/reftests/font-inflation/consecutive-inline-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<style> + div { + width: 450px; + font-size: 34px; + } + + a { + font-weight: bold; + line-height: 1.1em; + color: blue; + } + + a#first { + font-size: 34px; + font-style: italic; + } + + a#second { + font-size: 40px; + } + +</style> +<!-- +In a 450 px container, the minimum font size at 15em per line is 30px. This +means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px and 30px +gets mapped to 40px. +--> +<div> + <a id="first" href="">Hello</a><a id="second" href="">Worldz</a> +</div> diff --git a/layout/reftests/font-inflation/consecutive-inline.html b/layout/reftests/font-inflation/consecutive-inline.html new file mode 100644 index 0000000000..bb2e4b8c4a --- /dev/null +++ b/layout/reftests/font-inflation/consecutive-inline.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<style> + div { + width: 450px; + font-size: 12px; + } + + a { + font-weight: bold; + line-height: 1.1em; + color: blue; + } + + a#first { + font-size: 12px; + font-style: italic; + } + + a#second { + font-size: 30px; + } + +</style> +<!-- +In a 450 px container, the minimum font size at 15em per line is 30px. This +means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px and 30px +gets mapped to 40px. +--> +<div> + <a id="first" href="">Hello</a><a id="second" href="">Worldz</a> +</div> diff --git a/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html b/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html new file mode 100644 index 0000000000..966612ec45 --- /dev/null +++ b/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<style> + div { background: yellow } + div { font-size: 20px; line-height: 1.0; width: 450px } +</style> +<!-- +Without the patch for bug 707855, we have a 450px container, and the minimum font size +at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped +to 34px. + +With the patch, then we have a 240px container, so the minimum font size +at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets +mapped to 20px. +--> +<div>Test to see if too large of a container causes a giant escalation of the font size when font inflation is enabled.</div> diff --git a/layout/reftests/font-inflation/container-with-clamping-innerFrame.html b/layout/reftests/font-inflation/container-with-clamping-innerFrame.html new file mode 100644 index 0000000000..f6a0cec990 --- /dev/null +++ b/layout/reftests/font-inflation/container-with-clamping-innerFrame.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<style> + div { background: yellow } + div { font-size: 12px; line-height: 1.0; width: 450px } +</style> +<!-- +Without the patch for bug 707855, we have a 450px container, and the minimum font size +at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped +to 34px. + +With the patch, then we have a 240px container, so the minimum font size +at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets +mapped to 20px. +--> +<div>Test to see if too large of a container causes a giant escalation of the font size when font inflation is enabled.</div> diff --git a/layout/reftests/font-inflation/container-with-clamping-ref.html b/layout/reftests/font-inflation/container-with-clamping-ref.html new file mode 100644 index 0000000000..74e73798eb --- /dev/null +++ b/layout/reftests/font-inflation/container-with-clamping-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 12px; line-height: 1.0; width: 1200px } +</style> +<!-- +Without the patch for bug 707855, we have a 450px container, and the minimum font size +at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped +to 34px. + +With the patch, then we have a 240px container, so the minimum font size +at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets +mapped to 20px. +--> +<iframe src="container-with-clamping-innerFrame-ref.html" width="240" height="400"> +</iframe> diff --git a/layout/reftests/font-inflation/container-with-clamping.html b/layout/reftests/font-inflation/container-with-clamping.html new file mode 100644 index 0000000000..69afa734e3 --- /dev/null +++ b/layout/reftests/font-inflation/container-with-clamping.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<!-- +Without the patch for bug 707855, we have a 450px container, and the minimum font size +at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped +to 34px. + +With the patch, then we have a 240px container, so the minimum font size +at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets +mapped to 20px. +--> +<iframe src="container-with-clamping-innerFrame.html" width="240" height="400"> +</iframe> diff --git a/layout/reftests/font-inflation/css-transform-1-ref.html b/layout/reftests/font-inflation/css-transform-1-ref.html new file mode 100644 index 0000000000..36ea266158 --- /dev/null +++ b/layout/reftests/font-inflation/css-transform-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 150px; line-height: 1.0; white-space: nowrap } +span { -moz-transform-origin: 0 0; -moz-transform: scale(1.2); } +</style> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/css-transform-1.html b/layout/reftests/font-inflation/css-transform-1.html new file mode 100644 index 0000000000..7fc0e8fe53 --- /dev/null +++ b/layout/reftests/font-inflation/css-transform-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; width: 450px; line-height: 1.0 } +span { -moz-transform-origin: 0 0; -moz-transform: scale(1.2); } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/css-transform-2-ref.html b/layout/reftests/font-inflation/css-transform-2-ref.html new file mode 100644 index 0000000000..b0916faad8 --- /dev/null +++ b/layout/reftests/font-inflation/css-transform-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 150px; line-height: 1.0; white-space: nowrap } +p { -moz-transform-origin: 0 0; margin: 0; -moz-transform: scale(1.2); } +</style> +<div><p>Hello world</p></div> diff --git a/layout/reftests/font-inflation/css-transform-2.html b/layout/reftests/font-inflation/css-transform-2.html new file mode 100644 index 0000000000..856ee8e2c6 --- /dev/null +++ b/layout/reftests/font-inflation/css-transform-2.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; width: 450px; line-height: 1.0 } +p { -moz-transform-origin: 0 0; margin: 0; -moz-transform: scale(1.2); } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><p>Hello world</p></div> diff --git a/layout/reftests/font-inflation/decoration-1-ref.html b/layout/reftests/font-inflation/decoration-1-ref.html new file mode 100644 index 0000000000..ce2b0c0ef0 --- /dev/null +++ b/layout/reftests/font-inflation/decoration-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 34px; line-height: 1.0; width: 450px } +span { font-size: 36px } +div { text-decoration: underline overline line-through } +</style> +<div>Hello <span>world</span></div> diff --git a/layout/reftests/font-inflation/decoration-1.html b/layout/reftests/font-inflation/decoration-1.html new file mode 100644 index 0000000000..9392fafcd1 --- /dev/null +++ b/layout/reftests/font-inflation/decoration-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 12px; line-height: 1.0; width: 450px } +span { font-size: 18px } +div { text-decoration: underline overline line-through } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px +and 18px gets mapped to 36px. +--> +<div>Hello <span>world</span></div> diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html new file mode 100644 index 0000000000..d251decdeb --- /dev/null +++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html @@ -0,0 +1,20 @@ +<!-- +Without the patch for bug 706198, this website should not show up as inflated. That means +that with a 450px container, the minimum font size with 15em per line should be 30px. +So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px. + +With the patch, the text should be uninflated, which means that 12px should still be +12px. +--> +<!DOCTYPE html> +<html> + <head> + <meta content='True' name='HandheldFriendly' /> + <style> + p { font-size: 12px; line-height: 1.0;} + </style> + <body> + <p>Some uninflated text.</p> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html new file mode 100644 index 0000000000..0bd4eaca7c --- /dev/null +++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html @@ -0,0 +1,20 @@ +<!-- +Without the patch for bug 706198, this website should not show up as inflated. That means +that with a 450px container, the minimum font size with 15em per line should be 30px. +So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px. + +With the patch, the text should be uninflated, which means that 12px should still be +12px. +--> +<!DOCTYPE html> +<html> + <head> + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> + <style> + p { font-size: 12px; line-height: 1.0;} + </style> + <body> + <p>Some uninflated text.</p> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html new file mode 100644 index 0000000000..40149c9b58 --- /dev/null +++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> + +<!-- +The <meta name="viewport"> tag takes precedence over the doctype, so this +should *not* be treated as a "mobile" site (bug 783565). +--> +<html> + <head> + <meta name="viewport" content="width=10000"> + <style> + p { font-size: 12px; line-height: 1.0;} + </style> + <body> + <p>Some uninflated text.</p> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html new file mode 100644 index 0000000000..ab35ad7803 --- /dev/null +++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html @@ -0,0 +1,19 @@ +<!-- +Without the patch for bug 706198, this website should not show up as inflated. That means +that with a 450px container, the minimum font size with 15em per line should be 30px. +So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px. + +With the patch, the text should be uninflated, which means that 12px should still be +12px. +--> +<!DOCTYPE html> +<html> + <head> + <style> + p { font-size: 12px; line-height: 1.0;} + </style> + <body> + <p>Some uninflated text.</p> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html new file mode 100644 index 0000000000..1e182b37f1 --- /dev/null +++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> + +<!-- +Without the patch for bug 706198, this website should not show up as inflated. That means +that with a 450px container, the minimum font size with 15em per line should be 30px. +So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px. + +With the patch, the text should be uninflated, which means that 12px should still be +12px. +--> +<html> + <head> + <style> + p { font-size: 12px; line-height: 1.0;} + </style> + <body> + <p>Some uninflated text.</p> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/fixed-height-body-child-ref.html b/layout/reftests/font-inflation/fixed-height-body-child-ref.html new file mode 100644 index 0000000000..1b492bf5cb --- /dev/null +++ b/layout/reftests/font-inflation/fixed-height-body-child-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<!-- +The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px +into 30px-45px, so 12px gets mapped to 34px. +--> +<html> + <head> + <style> + body { + height: 100%; + /* + * We need overflow:hidden because we can't show a scrollbar due + * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 . + */ + overflow: hidden; + } + + div { + width: 450px; + } + + p { + line-height: 1.1; + font-size: 34px; + margin: 0; + } + </style> + </head> + <body> + <div> + <p>Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.</p> + </div> + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-height-body-child.html b/layout/reftests/font-inflation/fixed-height-body-child.html new file mode 100644 index 0000000000..9efb024253 --- /dev/null +++ b/layout/reftests/font-inflation/fixed-height-body-child.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<!-- +The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px +into 30px-45px, so 12px gets mapped to 34px. +--> +<html> + <head> + <style> + body { + height: 100%; + /* + * We need overflow:hidden because we can't show a scrollbar due + * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 . + */ + overflow: hidden; + } + + div { + width: 450px; + } + + p { + line-height: 1.1; + font-size: 12px; + margin: 0; + } + </style> + </head> + <body> + <div> + <p>Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.</p> + </div> + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-height-body-ref.html b/layout/reftests/font-inflation/fixed-height-body-ref.html new file mode 100644 index 0000000000..785c407b2b --- /dev/null +++ b/layout/reftests/font-inflation/fixed-height-body-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<!-- +The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px +into 30px-45px, so 12px gets mapped to 34px. +--> +<html> +<head> + <style> + body { + height: 100%; + width: 450px; + line-height: 1.1; + font-size: 34px; + /* + * We need overflow:hidden because we can't show a scrollbar due + * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 . + */ + overflow: hidden; + } + </style> +</head> + <body> + Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole. + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-height-body.html b/layout/reftests/font-inflation/fixed-height-body.html new file mode 100644 index 0000000000..37919761ab --- /dev/null +++ b/layout/reftests/font-inflation/fixed-height-body.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<!-- +The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px +into 30px-45px, so 12px gets mapped to 34px. +--> +<html> +<head> + <style> + body { + height: 100%; + width: 450px; + line-height: 1.1; + font-size: 12px; + /* + * We need overflow:hidden because we can't show a scrollbar due + * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 . + */ + overflow: hidden; + } + </style> +</head> + <body> + Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole. + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html b/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html new file mode 100644 index 0000000000..e4858590c4 --- /dev/null +++ b/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<!-- +Our body is 2000px wide, but the effective container size for font inflation will be clamped to the +viewport width of 1000px (this test uses a custom value for browser.viewport.desktopWidth). +The minimum font size at 20em per line in an 1000px container is 50px. This means we map 0px-75px +into 50px-75px, so 12px gets mapped to 54px. +--> +<html> +<head> + <style> + body { + width: 2000px; + line-height: 1.1; + font-size: 54px; + overflow: hidden; + -moz-text-size-adjust: none; + } + </style> +</head> + <body> + PERSONS attempting to find a motive in this narrative will be prosecuted; + persons attempting to find a moral in it will be banished; + persons attempting to find a plot in it will be shot.<br> + BY ORDER OF THE AUTHOR,<br> + Per G.G., Chief of Ordnance. + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-width-body-viewport.html b/layout/reftests/font-inflation/fixed-width-body-viewport.html new file mode 100644 index 0000000000..b33a1d0938 --- /dev/null +++ b/layout/reftests/font-inflation/fixed-width-body-viewport.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<!-- +Our body is 2000px wide, but the effective container size for font inflation will be clamped to the +viewport width of 1000px (this test uses a custom value for browser.viewport.desktopWidth). +The minimum font size at 20em per line in an 1000px container is 50px. This means we map 0px-75px +into 50px-75px, so 12px gets mapped to 54px. +--> +<html> +<head> + <style> + body { + width: 2000px; + line-height: 1.1; + font-size: 12px; + overflow: hidden; + } + </style> +</head> + <body> + PERSONS attempting to find a motive in this narrative will be prosecuted; + persons attempting to find a moral in it will be banished; + persons attempting to find a plot in it will be shot.<br> + BY ORDER OF THE AUTHOR,<br> + Per G.G., Chief of Ordnance. + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html b/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html new file mode 100644 index 0000000000..30f3bd9c02 --- /dev/null +++ b/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<html> + <head> + <meta name="viewport" content="width=801"/> + <style> + :root { scrollbar-color: transparent transparent; } + div { width: 450px; font-size: 34px; line-height: 1.0; } + </style> + <script> + if (location.search) + document.documentElement.setAttribute("reftest-zoom", location.search.substr(1)) + </script> + </head> + <body> + <div id="outer"> + <div>Some inflated text.</div> + </div> + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-width-viewport-inflation.html b/layout/reftests/font-inflation/fixed-width-viewport-inflation.html new file mode 100644 index 0000000000..f7fcfb2f2b --- /dev/null +++ b/layout/reftests/font-inflation/fixed-width-viewport-inflation.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<html> + <head> + <meta name="viewport" content="width=801"/> + <style> + :root { scrollbar-color: transparent transparent; } + div { width: 450px; font-size: 12px; line-height: 1.0; } + </style> + <script> + if (location.search) + document.documentElement.setAttribute("reftest-zoom", location.search.substr(1)) + </script> + </head> + <body> + <div id="outer"> + <div>Some inflated text.</div> + </div> + </body> +</html> diff --git a/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html b/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html new file mode 100644 index 0000000000..2e43ad619c --- /dev/null +++ b/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<html> + <head> + <meta name="viewport" content="width=800"/> + <style> + div { width: 450px; font-size: 12px; line-height: 1.0; } + </style> + <script> + if (location.search) + document.documentElement.setAttribute("reftest-zoom", location.search.substr(1)) + </script> + </head> + <body> + <div id="outer"> + <div>Some uninflated text.</div> + </div> + </body> +</html> diff --git a/layout/reftests/font-inflation/form-button-fixed-height-ref.html b/layout/reftests/font-inflation/form-button-fixed-height-ref.html new file mode 100644 index 0000000000..c59bba5044 --- /dev/null +++ b/layout/reftests/font-inflation/form-button-fixed-height-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 34px;
+ }
+
+ button {
+ font-size: 12px;
+ height: 20px;
+ }
+</style>
+<!--
+Because this button has a fixed height,
+font inflation should be disabled.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-height.html b/layout/reftests/font-inflation/form-button-fixed-height.html new file mode 100644 index 0000000000..29cb6fa860 --- /dev/null +++ b/layout/reftests/font-inflation/form-button-fixed-height.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 12px;
+ }
+
+ button {
+ font-size: 12px;
+ height: 20px;
+ }
+
+ .invisible {
+ color: white;
+ }
+</style>
+<!--
+Because this button has a fixed height,
+font inflation should be disabled.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+ <p class="invisible">Some text to ensure the button gets inflated - if it
+ wasn't size-restricted, that is - but which shouldn't influence the visual
+ result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-width-ref.html b/layout/reftests/font-inflation/form-button-fixed-width-ref.html new file mode 100644 index 0000000000..e9c564397b --- /dev/null +++ b/layout/reftests/font-inflation/form-button-fixed-width-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 34px;
+ }
+
+ button {
+ font-size: 12px;
+ width: 110px;
+ }
+</style>
+<!--
+Because this button has a fixed width,
+font inflation should be disabled.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-width.html b/layout/reftests/font-inflation/form-button-fixed-width.html new file mode 100644 index 0000000000..8cad80deb1 --- /dev/null +++ b/layout/reftests/font-inflation/form-button-fixed-width.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 12px;
+ }
+
+ button {
+ font-size: 12px;
+ width: 110px;
+ }
+
+ .invisible {
+ color: white;
+ }
+</style>
+<!--
+Because this button has a fixed width,
+font inflation should be disabled.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+ <p class="invisible">Some text to ensure the button gets inflated - if it
+ wasn't size-restricted, that is - but which shouldn't influence the visual
+ result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-ref.html b/layout/reftests/font-inflation/form-button-ref.html new file mode 100644 index 0000000000..98f5280300 --- /dev/null +++ b/layout/reftests/font-inflation/form-button-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 34px;
+ }
+
+ button {
+ font-size: 34px;
+ }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button.html b/layout/reftests/font-inflation/form-button.html new file mode 100644 index 0000000000..68fda9c500 --- /dev/null +++ b/layout/reftests/font-inflation/form-button.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+ div.outer {
+ width: 450px;
+ font-size: 12px;
+ }
+
+ button {
+ font-size: 12px;
+ }
+
+ .invisible {
+ color: white;
+ }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+ <form><button>Add Comment</button></form>
+ <p class="invisible">Some text to ensure the button gets inflated - if it
+ isn't size-restricted, that is - but which shouldn't influence the visual
+ result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-1-ref.html b/layout/reftests/font-inflation/height-constraint-percent-1-ref.html new file mode 100644 index 0000000000..91993e60bb --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 450px } +#center-block { height: 80%;} +#center-col { background: yellow; } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-1.html b/layout/reftests/font-inflation/height-constraint-percent-1.html new file mode 100644 index 0000000000..bab1273640 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-2-ref.html b/layout/reftests/font-inflation/height-constraint-percent-2-ref.html new file mode 100644 index 0000000000..ffee64c8a5 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 450px } +#center-block { max-height: 80%;} +#center-col { background: yellow; } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-2.html b/layout/reftests/font-inflation/height-constraint-percent-2.html new file mode 100644 index 0000000000..a54f68fb80 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { max-height: 80%; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-3-ref.html b/layout/reftests/font-inflation/height-constraint-percent-3-ref.html new file mode 100644 index 0000000000..ba31368112 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-3-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 450px } +#center-block { height: calc(80% + 5%); } +#center-col { background: yellow; } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-3.html b/layout/reftests/font-inflation/height-constraint-percent-3.html new file mode 100644 index 0000000000..165fdc70ff --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-3.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: calc(80% + 5%); } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-4-ref.html b/layout/reftests/font-inflation/height-constraint-percent-4-ref.html new file mode 100644 index 0000000000..440bac443e --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-4-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#center-col { background: yellow } +#containing-block { height: 800px; } +p { margin-top: 0px; } + +</style> +<!-- +Because the height of the containing block is constrained, the percent height should also +be constrained, resulting in font inflation being disabled. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-4.html b/layout/reftests/font-inflation/height-constraint-percent-4.html new file mode 100644 index 0000000000..440bac443e --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-4.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#center-col { background: yellow } +#containing-block { height: 800px; } +p { margin-top: 0px; } + +</style> +<!-- +Because the height of the containing block is constrained, the percent height should also +be constrained, resulting in font inflation being disabled. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-5-ref.html b/layout/reftests/font-inflation/height-constraint-percent-5-ref.html new file mode 100644 index 0000000000..eee590dd29 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-5-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#center-col { background: yellow } +#containing-block { height: calc(400px + 20px); } +p { margin-top: 0px; } + +</style> +<!-- +Because the height of the containing block is constrained, the percent height should also +be constrained, resulting in font inflation being disabled. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-5.html b/layout/reftests/font-inflation/height-constraint-percent-5.html new file mode 100644 index 0000000000..eee590dd29 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-5.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#center-col { background: yellow } +#containing-block { height: calc(400px + 20px); } +p { margin-top: 0px; } + +</style> +<!-- +Because the height of the containing block is constrained, the percent height should also +be constrained, resulting in font inflation being disabled. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-6-ref.html b/layout/reftests/font-inflation/height-constraint-percent-6-ref.html new file mode 100644 index 0000000000..d770afd6e6 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-6-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; width: 450px } +#center-block { height: 400px; } +#center-col { background: yellow; } +p { margin-top: 0px; } + +</style> +<!-- +Because the height is constrained, this should not be inflated. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-6.html b/layout/reftests/font-inflation/height-constraint-percent-6.html new file mode 100644 index 0000000000..cb241fda97 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-6.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 400px; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +Because the height is constrained, this should not be inflated. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-7-ref.html b/layout/reftests/font-inflation/height-constraint-percent-7-ref.html new file mode 100644 index 0000000000..6b74c83b16 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-7-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { max-height: 400px; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +Because the max height is constrained, this should not be inflated. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-7.html b/layout/reftests/font-inflation/height-constraint-percent-7.html new file mode 100644 index 0000000000..6b74c83b16 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-7.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { max-height: 400px; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +Because the max height is constrained, this should not be inflated. +--> +<div id="center-block"> +<div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-8-ref.html b/layout/reftests/font-inflation/height-constraint-percent-8-ref.html new file mode 100644 index 0000000000..9f71de00d4 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-8-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 34px; width: 450px } +#center-block { height: 80%; } +#containing-block { height: 80%; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/height-constraint-percent-8.html b/layout/reftests/font-inflation/height-constraint-percent-8.html new file mode 100644 index 0000000000..be5ec15d43 --- /dev/null +++ b/layout/reftests/font-inflation/height-constraint-percent-8.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> +div { margin-top: 0; font-size: 12px; width: 450px } +#center-block { height: 80%; } +#containing-block { height: 80%; } +#center-col { background: yellow } +p { margin-top: 0px; } + +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div id="containing-block"> + <div id="center-block"> + <div id="center-col"> + <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p> + </div> + </div> +</div> diff --git a/layout/reftests/font-inflation/input-checkbox.html b/layout/reftests/font-inflation/input-checkbox.html new file mode 100644 index 0000000000..8c2edc87aa --- /dev/null +++ b/layout/reftests/font-inflation/input-checkbox.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html><head> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<style> +body { width: 450px } +input { font-size: 12px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +</head> +<body><input type="checkbox">I have a bike</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-inflation/input-radio.html b/layout/reftests/font-inflation/input-radio.html new file mode 100644 index 0000000000..2ee3d2f14d --- /dev/null +++ b/layout/reftests/font-inflation/input-radio.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +</style> +<div><input type="radio">In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.</div>
\ No newline at end of file diff --git a/layout/reftests/font-inflation/input-text-1-height-ref.html b/layout/reftests/font-inflation/input-text-1-height-ref.html new file mode 100644 index 0000000000..7f50010017 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-1-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; width: 200px } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed-width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-1-height.html b/layout/reftests/font-inflation/input-text-1-height.html new file mode 100644 index 0000000000..7f50010017 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-1-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; width: 200px } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed-width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-1-noheight-ref.html b/layout/reftests/font-inflation/input-text-1-noheight-ref.html new file mode 100644 index 0000000000..52132e4f93 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-1-noheight-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +input { font-size: 12px; width: 200px } +</style> +<!-- +Because the width of the input element is constrained, font inflation +should be disabled for the input element, but not the div containing +it. +--> +<div>test<input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-1-noheight.html b/layout/reftests/font-inflation/input-text-1-noheight.html new file mode 100644 index 0000000000..8606b4eb96 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-1-noheight.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; width: 200px } +</style> +<!-- +Because the width of the input element is constrained, font inflation +should be disabled for the input element, but not the div containing +it. +--> +<div>test<input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-2-height-ref.html b/layout/reftests/font-inflation/input-text-2-height-ref.html new file mode 100644 index 0000000000..055dd5c389 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-2-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world" size="15"></div> diff --git a/layout/reftests/font-inflation/input-text-2-height.html b/layout/reftests/font-inflation/input-text-2-height.html new file mode 100644 index 0000000000..055dd5c389 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-2-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world" size="15"></div> diff --git a/layout/reftests/font-inflation/input-text-2-noheight-ref.html b/layout/reftests/font-inflation/input-text-2-noheight-ref.html new file mode 100644 index 0000000000..f9f7335b96 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-2-noheight-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +input { font-size: 34px; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><input type="text" value="Hello world" size="15"></div> diff --git a/layout/reftests/font-inflation/input-text-2-noheight.html b/layout/reftests/font-inflation/input-text-2-noheight.html new file mode 100644 index 0000000000..331401ef34 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-2-noheight.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><input type="text" value="Hello world" size="15"></div> diff --git a/layout/reftests/font-inflation/input-text-3-height-ref.html b/layout/reftests/font-inflation/input-text-3-height-ref.html new file mode 100644 index 0000000000..16a0877f18 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-3-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed-width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-3-height.html b/layout/reftests/font-inflation/input-text-3-height.html new file mode 100644 index 0000000000..16a0877f18 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-3-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +input { height: 50px } +</style> +<!-- +Because this input has a fixed height (and also a fixed-width), font +inflation should be disabled. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-3-noheight-ref.html b/layout/reftests/font-inflation/input-text-3-noheight-ref.html new file mode 100644 index 0000000000..6ca0c03f2d --- /dev/null +++ b/layout/reftests/font-inflation/input-text-3-noheight-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +input { font-size: 34px; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/input-text-3-noheight.html b/layout/reftests/font-inflation/input-text-3-noheight.html new file mode 100644 index 0000000000..6e8c055354 --- /dev/null +++ b/layout/reftests/font-inflation/input-text-3-noheight.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +input { font-size: 12px; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><input type="text" value="Hello world"></div> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html new file mode 100644 index 0000000000..389ac58282 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 10px } +p { + margin: 0; + background: yellow; + color: blue; + width: 60px; + font: 12px Ahem; +} +</style> +<!-- +In a 60px container, the minimum font size at 15em per line is 4px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1a.html b/layout/reftests/font-inflation/intrinsic-fit-1a.html new file mode 100644 index 0000000000..8f4a03dd0b --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1a.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 10px } +p { + margin: 0; + background: yellow; + color: blue; + width: -moz-fit-content; /* computes to 60px */ + font: 12px Ahem; +} +</style> +<!-- +In a 60px container, the minimum font size at 15em per line is 4px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html new file mode 100644 index 0000000000..ee6a28c38c --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: 300px; + font: 24px Ahem; +} +</style> +<!-- +In a 300px container, the minimum font size at 15em per line is 20px. +This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1b.html b/layout/reftests/font-inflation/intrinsic-fit-1b.html new file mode 100644 index 0000000000..ecd1bc6498 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: -moz-fit-content; /* computes to 300px */ + font: 12px Ahem; +} +</style> +<!-- +In a 300px container, the minimum font size at 15em per line is 20px. +This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html new file mode 100644 index 0000000000..75bf2ef98e --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 150px } +p { + margin: 0; + background: yellow; + color: blue; + width: 150px; + font: 14px Ahem; +} +</style> +<!-- +In a 150px container, the minimum font size at 15em per line is 10px. +This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-1c.html b/layout/reftests/font-inflation/intrinsic-fit-1c.html new file mode 100644 index 0000000000..7fdb9380b9 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 150px } +p { + margin: 0; + background: yellow; + color: blue; + width: -moz-fit-content; /* computes to 150px */ + font: 12px Ahem; +} +</style> +<!-- +In a 150px container, the minimum font size at 15em per line is 10px. +This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-2a.html b/layout/reftests/font-inflation/intrinsic-fit-2a.html new file mode 100644 index 0000000000..585bbcf823 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-2a.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 10px } +p { + margin: 0; + background: yellow; + color: blue; + float: left; + width: auto; /* computes to 60px */ + font: 12px Ahem; +} +</style> +<!-- +In a 60px container, the minimum font size at 15em per line is 4px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-2b.html b/layout/reftests/font-inflation/intrinsic-fit-2b.html new file mode 100644 index 0000000000..5b121c81b2 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-2b.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + float: left; + width: auto; /* computes to 300px */ + font: 12px Ahem; +} +</style> +<!-- +In a 300px container, the minimum font size at 15em per line is 20px. +This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-fit-2c.html b/layout/reftests/font-inflation/intrinsic-fit-2c.html new file mode 100644 index 0000000000..1614d893ae --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-fit-2c.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 150px } +p { + margin: 0; + background: yellow; + color: blue; + float: left; + width: auto; /* computes to 150px */ + font: 12px Ahem; +} +</style> +<!-- +In a 150px container, the minimum font size at 15em per line is 10px. +This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-max-1-ref.html b/layout/reftests/font-inflation/intrinsic-max-1-ref.html new file mode 100644 index 0000000000..862b0e3f08 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-max-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: 300px; + font: 24px Ahem; +} +</style> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-max-1.html b/layout/reftests/font-inflation/intrinsic-max-1.html new file mode 100644 index 0000000000..2300a124d1 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-max-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: max-content; /* computes to 300px */ + font: 12px Ahem; +} +</style> +<!-- +In a 300px container, the minimum font size at 15em per line is 20px. +This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px. +--> +<p>This is tiny bit of text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-min-1-ref.html b/layout/reftests/font-inflation/intrinsic-min-1-ref.html new file mode 100644 index 0000000000..70a044637d --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-min-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: 60px; + font: 12px Ahem; +} +</style> +<!-- +In a 60px container, the minimum font size at 15em per line is 4px. +--> +<p>This is some text.</p> diff --git a/layout/reftests/font-inflation/intrinsic-min-1.html b/layout/reftests/font-inflation/intrinsic-min-1.html new file mode 100644 index 0000000000..afb98d4405 --- /dev/null +++ b/layout/reftests/font-inflation/intrinsic-min-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<style> +@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } +html, body { margin: 0; padding: 0; } +body { width: 450px } +p { + margin: 0; + background: yellow; + color: blue; + width: min-content; /* computes to 60px */ + font: 12px Ahem; +} +</style> +<p>This is some text.</p> diff --git a/layout/reftests/font-inflation/list-1-ref.html b/layout/reftests/font-inflation/list-1-ref.html new file mode 100644 index 0000000000..43e66ad903 --- /dev/null +++ b/layout/reftests/font-inflation/list-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<head> +<style> +div { background: yellow; line-height: 1.0; font-size: 12px; width: 480px; border: 1px solid red; } +ol { padding-left: 120px; width: 400px;} +li { font-size: 36px; } +</style> +</head> +<!-- +In a 480px container, the minimum font size at 15em per line is 32px. +This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px. +The margins will be a little bit screwy, since we're fiddling with them +to make the list rendering better. +--> +<body> +<div> + <ol> + <li>Separate interface design from internals</li> + <li>Enable multiple user-interface strategies</li> + <li>Enable multiple-platform support</li> + </ol> +</div> +</body> diff --git a/layout/reftests/font-inflation/list-1.html b/layout/reftests/font-inflation/list-1.html new file mode 100644 index 0000000000..73adb1c622 --- /dev/null +++ b/layout/reftests/font-inflation/list-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<head> +<style> +div { background: yellow; line-height: 1.0; border: 1px solid red; font-size: 12px; width: 480px; } +ol { width: 480px;} +</style> +</head> +<!-- +In a 480px container, the minimum font size at 15em per line is 32px. +This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px. +--> +<body> +<div> + <ol> + <li>Separate interface design from internals</li> + <li>Enable multiple user-interface strategies</li> + <li>Enable multiple-platform support</li> + </ol> +</div> +</body> diff --git a/layout/reftests/font-inflation/maxRatio-1-ref.html b/layout/reftests/font-inflation/maxRatio-1-ref.html new file mode 100644 index 0000000000..dce6c6d8e3 --- /dev/null +++ b/layout/reftests/font-inflation/maxRatio-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 24px; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +However, because we've enabled the maxRatio at a value of 2.0, the mapping +function, which would normally return 34px/12px, or about 2.83, now +returns a ratio capped at 2.0, thus the actual font size is 24px. +--> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/maxRatio-1.html b/layout/reftests/font-inflation/maxRatio-1.html new file mode 100644 index 0000000000..0cbc120ae9 --- /dev/null +++ b/layout/reftests/font-inflation/maxRatio-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 12px; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +However, because we've enabled the maxRatio at a value of 2.0, the mapping +function, which would normally return 34px/12px, or about 2.83, now +returns a ratio capped at 2.0, thus the actual font size is 24px. +--> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/min-width-passes-1-ref.html b/layout/reftests/font-inflation/min-width-passes-1-ref.html new file mode 100644 index 0000000000..1027e29d99 --- /dev/null +++ b/layout/reftests/font-inflation/min-width-passes-1-ref.html @@ -0,0 +1,23 @@ +<html> +<head> +<title>Bug Reproduction</title> +</head> +<style type="text/css"> +html, body { + /* + * Work around bug 759755 / bug 757179. Setting overflow hidden + * avoids these bugs being triggered due to the hypothetical scrollbar + * reflows. + */ + overflow: hidden; +} +table { width: 100% } +body, table, tbody, tr, td { + margin: 0; border: none; padding: 0; border-spacing: 0; +} +</style> +<body> + <h1 id="welcome">Welcome to Bugzilla</h1> + <input type="button" id="find" value="Quick Search"></input> +</body> +</html> diff --git a/layout/reftests/font-inflation/min-width-passes-1.html b/layout/reftests/font-inflation/min-width-passes-1.html new file mode 100644 index 0000000000..0ab18996d9 --- /dev/null +++ b/layout/reftests/font-inflation/min-width-passes-1.html @@ -0,0 +1,25 @@ +<html> +<head> +<title>Bug Reproduction</title> +</head> +<style type="text/css"> +html, body { + /* + * Work around bug 759755 / bug 757179. Setting overflow hidden + * avoids these bugs being triggered due to the hypothetical scrollbar + * reflows. + */ + overflow: hidden; +} +table { width: 100% } +body, table, tbody, tr, td { + margin: 0; border: none; padding: 0; border-spacing: 0; +} +</style> +<body> +<table><tr><td> + <h1 id="welcome">Welcome to Bugzilla</h1> + <input type="button" id="find" value="Quick Search"></input> +</td></tr></table> +</body> +</html> diff --git a/layout/reftests/font-inflation/preformatted-text-ref.html b/layout/reftests/font-inflation/preformatted-text-ref.html new file mode 100644 index 0000000000..0a847a8066 --- /dev/null +++ b/layout/reftests/font-inflation/preformatted-text-ref.html @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html> + +<!-- +This text is in a preformatted block, and should therefore not be inflated with the fix for bug 705446. +--> +<html> + <head> + <style> + pre { font-size: 12px; line-height: 1.0;} + </style> + <body> + <div> + <pre> + <div class="line" id="line1"><span style="color: red">Firefox</span> is quite neat</div> + <div class="line" id="line2">It browses the web fluidly</div> + <div class="line" id="line3">With no cares at all</div> + </pre> + </div> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/preformatted-text.html b/layout/reftests/font-inflation/preformatted-text.html new file mode 100644 index 0000000000..0a847a8066 --- /dev/null +++ b/layout/reftests/font-inflation/preformatted-text.html @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html> + +<!-- +This text is in a preformatted block, and should therefore not be inflated with the fix for bug 705446. +--> +<html> + <head> + <style> + pre { font-size: 12px; line-height: 1.0;} + </style> + <body> + <div> + <pre> + <div class="line" id="line1"><span style="color: red">Firefox</span> is quite neat</div> + <div class="line" id="line2">It browses the web fluidly</div> + <div class="line" id="line3">With no cares at all</div> + </pre> + </div> + </body> + </head> +</html> diff --git a/layout/reftests/font-inflation/reftest.list b/layout/reftests/font-inflation/reftest.list new file mode 100644 index 0000000000..20548830e7 --- /dev/null +++ b/layout/reftests/font-inflation/reftest.list @@ -0,0 +1,134 @@ +# The following tests were written before +# font.size.inflation.lineThreshold was implemented, and thus assumed +# that there wasn't a threshold of text required for inflation. To run +# them compatibly without having to rewrite all of them, we run them +# with the lineThreshold preference explicitly set to zero. However, +# newer tests should probably focus more on testing nonzero values of +# that preference. + +# The font-inflation code uses the meta-viewport tag as one of its inputs +# when determining if font-inflation needs to be applied, so enable it for +# these tests. +defaults pref(dom.meta-viewport.enabled,true) + +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) test-pref(font.size.inflation.maxRatio,200) == maxRatio-1.html maxRatio-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-1.html text-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-2.html text-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-3.html text-3-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-4.html text-4-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-1.html height-constraint-percent-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-2.html height-constraint-percent-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-3.html height-constraint-percent-3-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-4.html height-constraint-percent-4-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-5.html height-constraint-percent-5-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-6.html height-constraint-percent-6-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-7.html height-constraint-percent-7-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-8.html height-constraint-percent-8-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == decoration-1.html decoration-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == bullet-1.html bullet-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-height.html input-text-1-height-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-noheight.html input-text-1-noheight-ref.html # bug 1540176 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-height.html input-text-2-height-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-noheight.html input-text-2-noheight-ref.html # bug 1540176 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-height.html input-text-3-height-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-noheight.html input-text-3-noheight-ref.html # bug 1540176 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-1.html textarea-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-2.html textarea-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-3.html textarea-3-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == css-transform-1.html css-transform-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) fuzzy(0-1,0-19) == css-transform-2.html css-transform-2-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,0-102,0-1764) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == container-with-clamping.html container-with-clamping-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) load video-1.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-min-1.html intrinsic-min-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-max-1.html intrinsic-max-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1a.html intrinsic-fit-1a-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1b.html intrinsic-fit-1b-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1c.html intrinsic-fit-1c-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2a.html intrinsic-fit-1a-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2b.html intrinsic-fit-1b-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2c.html intrinsic-fit-1c-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-listbox-1.html select-listbox-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-listbox-1.html select-listbox-1.html +fuzzy(0-4,0-7) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-1.html select-combobox-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-combobox-1.html select-combobox-1.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-listbox-2.html select-listbox-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-listbox-2.html select-listbox-2.html +fuzzy(0-1,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-2.html select-combobox-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-combobox-2.html select-combobox-2.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-3.html select-combobox-3-ref.html +asserts-if(gtkWidget,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != input-checkbox.html input-checkbox.html +asserts-if(gtkWidget,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != input-radio.html input-radio.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile.html disable-fontinfl-on-mobile-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile-2.html disable-fontinfl-on-mobile-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile-3.html disable-fontinfl-on-mobile-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != disable-fontinfl-on-mobile-5.html disable-fontinfl-on-mobile-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == preformatted-text.html preformatted-text-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-height-body.html fixed-height-body-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-height-body-child.html fixed-height-body-child-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == consecutive-inline.html consecutive-inline-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button-fixed-height.html form-button-fixed-height-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button-fixed-width.html form-button-fixed-width-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button.html form-button-ref.html + +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-no-inflation.html fixed-width-viewport-no-inflation.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-no-inflation.html?0.5 fixed-width-viewport-no-inflation.html?0.5 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-inflation.html fixed-width-viewport-inflation-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-inflation.html?2.0 fixed-width-viewport-inflation-ref.html?2.0 + +# Ordinarily, reftests use a browser.viewport.desktopWidth of 800px, same as the +# size of the reftest document. The failure condition of the test below however +# depends on the initial window size being smaller than the viewport the +# MobileViewportManager eventually calculates, so we use a bigger value here. +pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,20) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) test-pref(browser.viewport.desktopWidth,1000) == fixed-width-body-viewport.html fixed-width-body-viewport-ref.html + +# The tests in the groups below use nonzero values of the lineThreshold +# preference. +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == text-1.html text-1.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) skip-if(cocoaWidget) == list-1.html list-1-ref.html # Bug 1434812 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1a.html threshold-1a.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1b.html threshold-1b-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1c.html threshold-1c-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-2.html threshold-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-3.html threshold-3-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-1.html threshold-scope-float-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-2.html threshold-scope-float-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-overflow-1.html threshold-scope-float-overflow-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-overflow-2.html threshold-scope-float-overflow-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-1.html threshold-scope-cell-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-2.html threshold-scope-cell-2-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-3.html threshold-scope-cell-3-ref.html + +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-1.html threshold-scope-flex-container-1.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-2.html threshold-scope-flex-container-2.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-1.html threshold-scope-grid-container-1.html +pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-1.html threshold-scope-flex-container-items-1.html +pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-2.html threshold-scope-flex-container-items-2.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-items-1.html threshold-scope-grid-container-items-1.html + +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-under-1.html threshold-textarea-contents-under-1.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-under-2.html threshold-textarea-contents-under-2.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-at-1.html threshold-textarea-contents-at-1-ref.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-at-2.html threshold-textarea-contents-at-2-ref.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-1.html threshold-input-text-contents-under-1.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-2.html threshold-input-text-contents-under-2.html +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-1.html threshold-input-text-contents-at-1-ref.html # bug 1540176 +fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-2.html threshold-input-text-contents-at-2-ref.html # bug 1540176 +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-1.html threshold-select-listbox-contents-under-1.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-2.html threshold-select-listbox-contents-under-2.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-at-1.html threshold-select-listbox-contents-at-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-at-2.html threshold-select-listbox-contents-at-2-ref.html +fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-4,0-2) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-under-1.html threshold-select-combobox-contents-under-1.html +fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-1,0-2) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) fuzzy-if(geckoview,0-4,0-2) == threshold-select-combobox-contents-under-2.html threshold-select-combobox-contents-under-2.html +fuzzy(0-1,0-6) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-at-1.html threshold-select-combobox-contents-at-1-ref.html +fuzzy(0-1,0-6) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-at-2.html threshold-select-combobox-contents-at-2-ref.html +# End of nonzero lineThreshold preference group. + +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == relevant-width-1.html relevant-width-1-ref.html +test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == relevant-width-overflow-1.html relevant-width-overflow-1-ref.html + +pref(font.size.inflation.emPerLine,15) pref(font.size.inflation.forceEnabled,true) pref(font.size.inflation.lineThreshold,0) == min-width-passes-1.html min-width-passes-1-ref.html + +random-if(gtkWidget) pref(font.size.inflation.emPerLine,15) pref(font.size.inflation.forceEnabled,true) == xul-reflow-1.html xul-reflow-1-ref.html + +# reset the default preferences +defaults diff --git a/layout/reftests/font-inflation/relevant-width-1-ref.html b/layout/reftests/font-inflation/relevant-width-1-ref.html new file mode 100644 index 0000000000..90b67e1b6a --- /dev/null +++ b/layout/reftests/font-inflation/relevant-width-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 450px } +div.inner { width: 300px } +</style> +<div class="middle"> + Text in middle. + <div class="inner">Text in inner.</div> +</div> diff --git a/layout/reftests/font-inflation/relevant-width-1.html b/layout/reftests/font-inflation/relevant-width-1.html new file mode 100644 index 0000000000..814917786d --- /dev/null +++ b/layout/reftests/font-inflation/relevant-width-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div.outer { font-size: 12px; width: 600px } +div.middle { width: 450px; } +div.inner { width: 300px; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div class="outer"> + <div class="middle"> + Text in middle. + <div class="inner">Text in inner.</div> + </div> +</div> diff --git a/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html b/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html new file mode 100644 index 0000000000..96f555569c --- /dev/null +++ b/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; width: 450px } +div.inner { width: 300px; overflow: hidden; } +</style> +<div class="middle"> + Text in middle. + <div class="inner">Text in inner.</div> +</div> diff --git a/layout/reftests/font-inflation/relevant-width-overflow-1.html b/layout/reftests/font-inflation/relevant-width-overflow-1.html new file mode 100644 index 0000000000..ca6bf57c71 --- /dev/null +++ b/layout/reftests/font-inflation/relevant-width-overflow-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +div.outer { font-size: 12px; width: 600px } +div.middle { width: 450px; } +div.inner { width: 300px; overflow: hidden; } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div class="outer"> + <div class="middle"> + Text in middle. + <div class="inner">Text in inner.</div> + </div> +</div> diff --git a/layout/reftests/font-inflation/select-combobox-1-ref.html b/layout/reftests/font-inflation/select-combobox-1-ref.html new file mode 100644 index 0000000000..17d29405d1 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 34px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select><option>One</option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-combobox-1.html b/layout/reftests/font-inflation/select-combobox-1.html new file mode 100644 index 0000000000..87b01d9bd9 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 12px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select><option>One</option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-combobox-2-ref.html b/layout/reftests/font-inflation/select-combobox-2-ref.html new file mode 100644 index 0000000000..50c12dc928 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 34px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select> + <optgroup label="Counties"> + <option>Arlington + <option>Fairfax + <option>Loudon + <option>Prince William + <optgroup label="Cities"> + <option>Alexandria + <option>Falls Church + <option>Manassas + <option>Manassas Park +</select> diff --git a/layout/reftests/font-inflation/select-combobox-2.html b/layout/reftests/font-inflation/select-combobox-2.html new file mode 100644 index 0000000000..19808ed1b0 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 12px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select> + <optgroup label="Counties"> + <option>Arlington + <option>Fairfax + <option>Loudon + <option>Prince William + <optgroup label="Cities"> + <option>Alexandria + <option>Falls Church + <option>Manassas + <option>Manassas Park +</select> diff --git a/layout/reftests/font-inflation/select-combobox-3-ref.html b/layout/reftests/font-inflation/select-combobox-3-ref.html new file mode 100644 index 0000000000..3c966264c0 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> + body { line-height: 1.0; width: 450px; font-size: 34px; } + select { vertical-align: top; font-size: 12px; width: 100px; } +</style> +<!-- +Because the combobox has constrained width, font inflation +should be disabled. +--> +<select><option>One</Option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-combobox-3.html b/layout/reftests/font-inflation/select-combobox-3.html new file mode 100644 index 0000000000..3c966264c0 --- /dev/null +++ b/layout/reftests/font-inflation/select-combobox-3.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> + body { line-height: 1.0; width: 450px; font-size: 34px; } + select { vertical-align: top; font-size: 12px; width: 100px; } +</style> +<!-- +Because the combobox has constrained width, font inflation +should be disabled. +--> +<select><option>One</Option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-listbox-1-ref.html b/layout/reftests/font-inflation/select-listbox-1-ref.html new file mode 100644 index 0000000000..e8758855b7 --- /dev/null +++ b/layout/reftests/font-inflation/select-listbox-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 34px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select size="3"><option>One</option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-listbox-1.html b/layout/reftests/font-inflation/select-listbox-1.html new file mode 100644 index 0000000000..a6b073f7f6 --- /dev/null +++ b/layout/reftests/font-inflation/select-listbox-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 12px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select size="3"><option>One</option><option>Two</option></select> diff --git a/layout/reftests/font-inflation/select-listbox-2-ref.html b/layout/reftests/font-inflation/select-listbox-2-ref.html new file mode 100644 index 0000000000..d25b802758 --- /dev/null +++ b/layout/reftests/font-inflation/select-listbox-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 34px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select size="3"> + <optgroup label="Counties"> + <option>Arlington + <option>Fairfax + <option>Loudon + <option>Prince William + <optgroup label="Cities"> + <option>Alexandria + <option>Falls Church + <option>Manassas + <option>Manassas Park +</select> diff --git a/layout/reftests/font-inflation/select-listbox-2.html b/layout/reftests/font-inflation/select-listbox-2.html new file mode 100644 index 0000000000..ba5da11247 --- /dev/null +++ b/layout/reftests/font-inflation/select-listbox-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> +body { width: 450px } +body, select { font-size: 12px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<select size="3"> + <optgroup label="Counties"> + <option>Arlington + <option>Fairfax + <option>Loudon + <option>Prince William + <optgroup label="Cities"> + <option>Alexandria + <option>Falls Church + <option>Manassas + <option>Manassas Park +</select> diff --git a/layout/reftests/font-inflation/text-1-ref.html b/layout/reftests/font-inflation/text-1-ref.html new file mode 100644 index 0000000000..cdf5d85448 --- /dev/null +++ b/layout/reftests/font-inflation/text-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 34px; width: 450px } +</style> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/text-1.html b/layout/reftests/font-inflation/text-1.html new file mode 100644 index 0000000000..3bc6129d36 --- /dev/null +++ b/layout/reftests/font-inflation/text-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 12px; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/text-2-ref.html b/layout/reftests/font-inflation/text-2-ref.html new file mode 100644 index 0000000000..ea117963c0 --- /dev/null +++ b/layout/reftests/font-inflation/text-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 34px; line-height: 1.0; width: 450px } +</style> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/text-2.html b/layout/reftests/font-inflation/text-2.html new file mode 100644 index 0000000000..848a40eb3a --- /dev/null +++ b/layout/reftests/font-inflation/text-2.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +div { font-size: 12px; line-height: 1.0; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div>Hello world</div> diff --git a/layout/reftests/font-inflation/text-3-ref.html b/layout/reftests/font-inflation/text-3-ref.html new file mode 100644 index 0000000000..c2565f0c97 --- /dev/null +++ b/layout/reftests/font-inflation/text-3-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +span { background: aqua } +div { font-size: 34px; width: 450px } +</style> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/text-3.html b/layout/reftests/font-inflation/text-3.html new file mode 100644 index 0000000000..e410a10ace --- /dev/null +++ b/layout/reftests/font-inflation/text-3.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +span { background: aqua } +div { font-size: 12px; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/text-4-ref.html b/layout/reftests/font-inflation/text-4-ref.html new file mode 100644 index 0000000000..b8930c1171 --- /dev/null +++ b/layout/reftests/font-inflation/text-4-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +span { background: aqua } +div { font-size: 34px; line-height: 1.0; width: 450px } +</style> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/text-4.html b/layout/reftests/font-inflation/text-4.html new file mode 100644 index 0000000000..ba9ab9ef80 --- /dev/null +++ b/layout/reftests/font-inflation/text-4.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { background: yellow } +span { background: aqua } +div { font-size: 12px; line-height: 1.0; width: 450px } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><span>Hello world</span></div> diff --git a/layout/reftests/font-inflation/textarea-1-ref.html b/layout/reftests/font-inflation/textarea-1-ref.html new file mode 100644 index 0000000000..78adafb84d --- /dev/null +++ b/layout/reftests/font-inflation/textarea-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +textarea { font-size: 12px; width: 200px; height: 50px } +textarea { line-height: 1.0 } +</style> +<!-- +Because the textarea has constrained width and height, font +inflation should be disabled for this case. +--> +<div><textarea>Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/textarea-1.html b/layout/reftests/font-inflation/textarea-1.html new file mode 100644 index 0000000000..f8bac798c1 --- /dev/null +++ b/layout/reftests/font-inflation/textarea-1.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +textarea { font-size: 12px; width: 200px; height: 50px } +textarea { line-height: 1.0 } +</style> +<!-- +Because the textarea has constrained width and height, font +inflation should be disabled for this case. +--> +<div><textarea>Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/textarea-2-ref.html b/layout/reftests/font-inflation/textarea-2-ref.html new file mode 100644 index 0000000000..da650e128f --- /dev/null +++ b/layout/reftests/font-inflation/textarea-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +textarea { font-size: 34px; } +textarea { line-height: 1.0 } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><textarea rows="4" cols="25">Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/textarea-2.html b/layout/reftests/font-inflation/textarea-2.html new file mode 100644 index 0000000000..7405f70754 --- /dev/null +++ b/layout/reftests/font-inflation/textarea-2.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +textarea { font-size: 12px; } +textarea { line-height: 1.0 } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><textarea rows="4" cols="25">Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/textarea-3-ref.html b/layout/reftests/font-inflation/textarea-3-ref.html new file mode 100644 index 0000000000..4f9d6065bc --- /dev/null +++ b/layout/reftests/font-inflation/textarea-3-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 34px; line-height: 1.0; width: 450px } +textarea { font-size: 34px; } +textarea { line-height: 1.0 } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><textarea>Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/textarea-3.html b/layout/reftests/font-inflation/textarea-3.html new file mode 100644 index 0000000000..e4ed681f4a --- /dev/null +++ b/layout/reftests/font-inflation/textarea-3.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<style> +div { font-size: 12px; line-height: 1.0; width: 450px } +textarea { font-size: 12px; } +textarea { line-height: 1.0 } +</style> +<!-- +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +--> +<div><textarea>Hello world</textarea></div> diff --git a/layout/reftests/font-inflation/threshold-1a.html b/layout/reftests/font-inflation/threshold-1a.html new file mode 100644 index 0000000000..0c204707b2 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-1a.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-1b-ref.html b/layout/reftests/font-inflation/threshold-1b-ref.html new file mode 100644 index 0000000000..3f6a472a2c --- /dev/null +++ b/layout/reftests/font-inflation/threshold-1b-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { font-size: 44px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-1b.html b/layout/reftests/font-inflation/threshold-1b.html new file mode 100644 index 0000000000..76d7ebd77b --- /dev/null +++ b/layout/reftests/font-inflation/threshold-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-1c-ref.html b/layout/reftests/font-inflation/threshold-1c-ref.html new file mode 100644 index 0000000000..f4ba6ed80d --- /dev/null +++ b/layout/reftests/font-inflation/threshold-1c-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { font-size: 44px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +123456789 +123456789 +12345678901</p> diff --git a/layout/reftests/font-inflation/threshold-1c.html b/layout/reftests/font-inflation/threshold-1c.html new file mode 100644 index 0000000000..9548035ccc --- /dev/null +++ b/layout/reftests/font-inflation/threshold-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +123456789 +123456789 +12345678901</p> diff --git a/layout/reftests/font-inflation/threshold-2-ref.html b/layout/reftests/font-inflation/threshold-2-ref.html new file mode 100644 index 0000000000..8aa266621a --- /dev/null +++ b/layout/reftests/font-inflation/threshold-2-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: separate blocks count together</title> +<style> +body { font-size: 44px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>1234567890</p> +<p>123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-2.html b/layout/reftests/font-inflation/threshold-2.html new file mode 100644 index 0000000000..cdd7413eb0 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: separate blocks count together</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>1234567890</p> +<p>123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-3-ref.html b/layout/reftests/font-inflation/threshold-3-ref.html new file mode 100644 index 0000000000..5deaac49b8 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-3-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: separate blocks count together</title> +<style> +body { font-size: 44px; width: 600px; } +h1, p { margin: 0 } +h1 { font-size: 56px; } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>1234567890</p> +<h1>Heading</h1> +<p>123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-3.html b/layout/reftests/font-inflation/threshold-3.html new file mode 100644 index 0000000000..eb842c5110 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-3.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: separate blocks count together</title> +<style> +body { font-size: 12px; width: 600px; } +h1, p { margin: 0 } +h1 { font-size: 48px; } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>1234567890</p> +<h1>Heading</h1> +<p>123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html new file mode 100644 index 0000000000..472ccc62bc --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="10" value="hi"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html new file mode 100644 index 0000000000..b277c6556c --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="10" value="hi"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html new file mode 100644 index 0000000000..639d05e8b9 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="10" value="this is a lot of text but it doesn't have an effect"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html new file mode 100644 index 0000000000..a26f0e92ea --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="10" value="this is a lot of text but it doesn't have an effect"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html b/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html new file mode 100644 index 0000000000..d464c66ab0 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="9" value="hi"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html b/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html new file mode 100644 index 0000000000..adf81cb9e4 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, input { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<input size="9" value="this is a lot of text but it doesn't have an effect"> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html new file mode 100644 index 0000000000..4e06fa9d83 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +table { border-spacing: 0 } /* FIXME: why is this needed? Something to do with ComputeDescendantWidth in nsFontInflationData? */ +td { padding: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px; font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</td></tr> +<tr><td>123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +</table> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-1.html b/layout/reftests/font-inflation/threshold-scope-cell-1.html new file mode 100644 index 0000000000..85e8f6f0da --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +table { border-spacing: 0 } /* FIXME: why is this needed? Something to do with ComputeDescendantWidth in nsFontInflationData? */ +td { padding: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px">123456789 +123456789 +123456789 +123456789 +1234567890</td></tr> +<tr><td>123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +</table> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html new file mode 100644 index 0000000000..f42a2fc382 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +table { border-spacing: 0 } /* FIXME: why is this needed? Something to do with ComputeDescendantWidth in nsFontInflationData? */ +td { padding: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +<tr><td style="font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</td></tr> +</table> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-2.html b/layout/reftests/font-inflation/threshold-scope-cell-2.html new file mode 100644 index 0000000000..3e485793c5 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +table { border-spacing: 0 } /* FIXME: why is this needed? Something to do with ComputeDescendantWidth in nsFontInflationData? */ +td { padding: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +<tr><td>123456789 +123456789 +123456789 +123456789 +1234567890</td></tr> +</table> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html new file mode 100644 index 0000000000..3bb1f74a29 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +<tr><td>123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +</table> +<p style="font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-cell-3.html b/layout/reftests/font-inflation/threshold-scope-cell-3.html new file mode 100644 index 0000000000..0d71335c04 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-cell-3.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<table><tr><td style="width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +<tr><td>123456789 +123456789 +123456789 +123456789 +123456789</td></tr> +</table> +<p>123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-1.html b/layout/reftests/font-inflation/threshold-scope-flex-container-1.html new file mode 100644 index 0000000000..2499cce7f6 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-flex-container-1.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + } + + .outer > div { + display: flex; + } +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>flex</div> + <div>containers</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-2.html b/layout/reftests/font-inflation/threshold-scope-flex-container-2.html new file mode 100644 index 0000000000..fe228e2c7d --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-flex-container-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + } + + .outer > div { + display: inline-flex; + } +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>flex</div> + <div>containers</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html b/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html new file mode 100644 index 0000000000..a970dd21dd --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + display: flex; + } + +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>flex</div> + <div>items</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html b/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html new file mode 100644 index 0000000000..86fee058a3 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + display: inline-flex; + } + +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>flex</div> + <div>items</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-scope-float-1-ref.html b/layout/reftests/font-inflation/threshold-scope-float-1-ref.html new file mode 100644 index 0000000000..54b1b4de80 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; width: 600px; font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</p> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-1.html b/layout/reftests/font-inflation/threshold-scope-float-1.html new file mode 100644 index 0000000000..75aa541b8f --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; width: 600px">123456789 +123456789 +123456789 +123456789 +1234567890</p> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-2-ref.html b/layout/reftests/font-inflation/threshold-scope-float-2-ref.html new file mode 100644 index 0000000000..7b0f11dfcc --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</p> +<p style="font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-2.html b/layout/reftests/font-inflation/threshold-scope-float-2.html new file mode 100644 index 0000000000..f8078f6b2b --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</p> +<p>123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html new file mode 100644 index 0000000000..4fcb6a40cc --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; overflow: hidden; width: 600px; font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</p> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html new file mode 100644 index 0000000000..11cd34e406 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; overflow: hidden; width: 600px">123456789 +123456789 +123456789 +123456789 +1234567890</p> +<p>123456789 +123456789 +123456789 +123456789 +123456789</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html new file mode 100644 index 0000000000..73104b9c8a --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; overflow: hidden; width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</p> +<p style="font-size: 44px">123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html new file mode 100644 index 0000000000..1b57917a99 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test: scope of accumulation</title> +<style> +body { font-size: 12px; width: 600px; } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p style="float:right; overflow: hidden; width: 600px">123456789 +123456789 +123456789 +123456789 +123456789</p> +<p>123456789 +123456789 +123456789 +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-scope-grid-container-1.html b/layout/reftests/font-inflation/threshold-scope-grid-container-1.html new file mode 100644 index 0000000000..0bb87bae46 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-grid-container-1.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + } + + .outer > div { + display: grid; + } +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>grid</div> + <div>containers</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html b/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html new file mode 100644 index 0000000000..8e67935aff --- /dev/null +++ b/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<style> + div.outer { + width: 450px; + font-size: 12px; + display: grid; + } + +</style> +<div class="outer"> + <div>These</div> + <div>separate</div> + <div>grid</div> + <div>items</div> + <div>shouldn't</div> + <div>be</div> + <div>inflated,</div> + <div>because</div> + <div>they</div> + <div>each</div> + <div>form</div> + <div>separate</div> + <div>formatting</div> + <div>contexts</div> + <div>and</div> + <div>should</div> + <div>therefore</div> + <div>be</div> + <div>considered</div> + <div>individually</div> + <div>when</div> + <div>evaluating</div> + <div>the</div> + <div>font</div> + <div>inflation</div> + <div>text</div> + <div>threshold.</div> +</div> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html new file mode 100644 index 0000000000..9e585c4bc9 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>1234567890</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html new file mode 100644 index 0000000000..8e24ea46ba --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>1234567890</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html new file mode 100644 index 0000000000..7ccb43a52c --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>1234567890</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html new file mode 100644 index 0000000000..87f5f3cedc --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>1234567890</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html new file mode 100644 index 0000000000..a29001f9e2 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>123456789</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html new file mode 100644 index 0000000000..de5e82b558 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select> + <option>123456789</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html new file mode 100644 index 0000000000..df3ce97425 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>1234567890</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html new file mode 100644 index 0000000000..b43e209d5b --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>1234567890</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html new file mode 100644 index 0000000000..7b79a99882 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>1234567890</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html new file mode 100644 index 0000000000..8b7374e692 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>1234567890</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html new file mode 100644 index 0000000000..777ac09f3a --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>123456789</option> + <option>2</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html new file mode 100644 index 0000000000..abfada7e36 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, select, option { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<select size="3"> + <option>123456789</option> + <option>23456789</option> + <option>3</option> +</select> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html new file mode 100644 index 0000000000..5728bb0fdf --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="10"> +hi +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html new file mode 100644 index 0000000000..d527e070f4 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="10"> +hi +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html new file mode 100644 index 0000000000..27dd261461 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 44px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="10"> +this is a lot of text but it doesn't have an effect +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html new file mode 100644 index 0000000000..02989efe10 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="10"> +this is a lot of text but it doesn't have an effect +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html b/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html new file mode 100644 index 0000000000..7b8b623216 --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="9"> +hi +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html b/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html new file mode 100644 index 0000000000..82c8faf0fa --- /dev/null +++ b/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>font.size.inflation.lineThreshold test</title> +<style> +body { width: 600px; } +body, textarea { font-size: 12px } +p { margin: 0 } +</style> +<!-- +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. + +Further, with a lineThreshold of 100, we need 50 characters of 12px +text to meet the line threshold. +--> +<p>123456789 +123456789 +<textarea rows="2" cols="9"> +this is a lot of text but it doesn't have an effect +</textarea> +123456789 +1234567890</p> diff --git a/layout/reftests/font-inflation/video-1.html b/layout/reftests/font-inflation/video-1.html new file mode 100644 index 0000000000..a8a4780dde --- /dev/null +++ b/layout/reftests/font-inflation/video-1.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<video src="../webm-video/black140x100.webm"></video> diff --git a/layout/reftests/font-inflation/xul-reflow-1-ref.html b/layout/reftests/font-inflation/xul-reflow-1-ref.html new file mode 100644 index 0000000000..a4ea6e8600 --- /dev/null +++ b/layout/reftests/font-inflation/xul-reflow-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 764354</title> +<style> +#outer { + width: 300px; + height: 100px; + background: yellow; color: black; +} +.inner { + background: aqua; color: black; + text-align: center; +} +</style> + +<div id="outer"> + <div class="inner">Text</div> + <div class="inner">Text</div> +</div> diff --git a/layout/reftests/font-inflation/xul-reflow-1.html b/layout/reftests/font-inflation/xul-reflow-1.html new file mode 100644 index 0000000000..929fd98837 --- /dev/null +++ b/layout/reftests/font-inflation/xul-reflow-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 764354</title> +<style> +#outer { + display: -moz-box; + overflow: hidden; + -moz-box-orient: vertical; + width: 300px; + height: 100px; + background: yellow; color: black; +} +.inner { + background: aqua; color: black; + text-align: center; +} +</style> + +<div id="outer"> + <div class="inner">Text</div> + <div class="inner">Text</div> +</div> |