diff options
Diffstat (limited to 'layout/reftests/font-matching')
170 files changed, 9007 insertions, 0 deletions
diff --git a/layout/reftests/font-matching/1367860-1.htm b/layout/reftests/font-matching/1367860-1.htm new file mode 100644 index 0000000000..53516dfe86 --- /dev/null +++ b/layout/reftests/font-matching/1367860-1.htm @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1367860 +Case 1: Language tag on ancestor / font-family on descendant + (passes before patch) +--> + +<html> +<head> + <meta charset="UTF-8"> +</head> +<body> + <div lang="ja" style="font-family: InvalidFontName;"> + These two lines should be exactly the same. + </div> + <div lang="ja"><div style="font-family: InvalidFontName;"> + These two lines should be exactly the same. + </div></div> +</body> +</html> diff --git a/layout/reftests/font-matching/1367860-2.htm b/layout/reftests/font-matching/1367860-2.htm new file mode 100644 index 0000000000..977743989e --- /dev/null +++ b/layout/reftests/font-matching/1367860-2.htm @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1367860 +Case 2: Language tag on descendant / font-family on ancestor + (fails before patch) +--> + +<html> +<head> + <meta charset="UTF-8"> +</head> +<body> + <div lang="ja" style="font-family: InvalidFontName;"> + These two lines should be exactly the same. + </div> + <div style="font-family: InvalidFontName;"><div lang="ja"> + These two lines should be exactly the same. + </div></div> +</body> +</html> diff --git a/layout/reftests/font-matching/1367860-3.htm b/layout/reftests/font-matching/1367860-3.htm new file mode 100644 index 0000000000..6791e2f167 --- /dev/null +++ b/layout/reftests/font-matching/1367860-3.htm @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1367860 +Case 3: No font-family + (fails before patch) +--> + +<html> +<head> + <meta charset="UTF-8"> +</head> +<body> + <div lang="ja" style="font-family: InvalidFontName;"> + These two lines should be exactly the same. + </div> + <div lang="ja"> + These two lines should be exactly the same. + </div> +</body> +</html> diff --git a/layout/reftests/font-matching/1367860-ref.htm b/layout/reftests/font-matching/1367860-ref.htm new file mode 100644 index 0000000000..c78ead43ab --- /dev/null +++ b/layout/reftests/font-matching/1367860-ref.htm @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1367860 +Reference for all cases +--> + +<html> +<head> + <meta charset="UTF-8"> +</head> +<body lang="ja" style="font-family: InvalidFontName;"> + <div>These two lines should be exactly the same.</div> + <div>These two lines should be exactly the same.</div> +</body> +</html> diff --git a/layout/reftests/font-matching/1394311-ref.htm b/layout/reftests/font-matching/1394311-ref.htm new file mode 100644 index 0000000000..f5ef6ef41f --- /dev/null +++ b/layout/reftests/font-matching/1394311-ref.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1394311 (reference file) +--> +<html> +<head> +<meta charset="UTF-8"> +<style> +span { + font-family: Foo; /* insert a bogus font-family to avoid Bug 1367860 */ + font-weight: bold; + border: 2px solid black; +} +</style> +</head> +<body style="font-size: xx-large"> + <span lang="zh-cn">述</span><span lang="zh-cn">述</span><span lang="zh-hans">述</span><span lang="zh-hans">述</span><br> + <span lang="zh-tw">述</span><span lang="zh-tw">述</span><span lang="zh-hant">述</span><span lang="zh-hant">述</span><br> + <span lang="ja-jp">述</span><span lang="ja-jp">述</span><br> + <span lang="ko-kr">述</span><span lang="ko-kr">述</span><br> +</body> +</html> diff --git a/layout/reftests/font-matching/1394311.htm b/layout/reftests/font-matching/1394311.htm new file mode 100644 index 0000000000..186ae11cb4 --- /dev/null +++ b/layout/reftests/font-matching/1394311.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- +Reftest for Bug 1394311 +--> +<html> +<head> +<meta charset="UTF-8"> +<style> +span { + font-family: Foo; /* insert a bogus font-family to avoid Bug 1367860 */ + font-weight: bold; + border: 2px solid black; +} +</style> +</head> +<body style="font-size: xx-large"> + <span lang="zh-CN">述</span><span lang="ZH-CN">述</span><span lang="zh-Hans">述</span><span lang="ZH-HANS">述</span><br> + <span lang="zh-TW">述</span><span lang="ZH-TW">述</span><span lang="zh-Hant">述</span><span lang="ZH-HANT">述</span><br> + <span lang="ja-JP">述</span><span lang="JA-JP">述</span><br> + <span lang="ko-KR">述</span><span lang="KO-KR">述</span><br> +</body> +</html> diff --git a/layout/reftests/font-matching/1458158-1-ref.html b/layout/reftests/font-matching/1458158-1-ref.html new file mode 100644 index 0000000000..18af0c3352 --- /dev/null +++ b/layout/reftests/font-matching/1458158-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+ @font-face {
+ font-family: arial_bold;
+ font-weight: bold;
+ src: local("Arial Bold");
+ }
+ @font-face {
+ font-family: arial_black;
+ font-weight: 900;
+ src: local("Arial Black");
+ }
+ h1 {
+ font-family: arial_bold;
+ }
+ b {
+ font-family: arial_black, arial_bold;
+ }
+ x {
+ font-family: Arial;
+ font-size: 2em;
+ color: transparent;
+ }
+</style>
+<h1>bold العربي <b>bolder العربي</b><x>A</x></h1>
diff --git a/layout/reftests/font-matching/1458158-1.html b/layout/reftests/font-matching/1458158-1.html new file mode 100644 index 0000000000..b4d04a18c4 --- /dev/null +++ b/layout/reftests/font-matching/1458158-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+ @font-face {
+ font-family: arial_black;
+ font-weight: 900;
+ src: local("Arial Black");
+ }
+ h1 {
+ font-family: Arial;
+ font-weight: bold;
+ }
+ /* We include an extra-large invisible character in the test line
+ to ensure a consistent baseline; otherwise differing metrics
+ between the various Arial faces can disrupt it. */
+ x {
+ font-family: Arial;
+ font-size: 2em;
+ color: transparent;
+ }
+</style>
+<h1>bold العربي <b>bolder العربي</b><x>A</x></h1>
diff --git a/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml new file mode 100644 index 0000000000..fb00a9aa95 --- /dev/null +++ b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1: Font matching algorithm (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + </head> + <body> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + +<div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. +</div> + + </body> +</html> diff --git a/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml new file mode 100644 index 0000000000..a3dcdba69c --- /dev/null +++ b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1: Font matching algorithm</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#algorithm" /> + <meta name="assert" content="That the 'UA-dependent default 'font-family'' described in step (5) does not vary based on the ancestor's font-family property." /> + </head> + <body> + +<div style="font-family: Arial, Helvetica, sans-serif"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Arial, Helvetica"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Arial"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Times New Roman, Times, serif"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Times New Roman, Times"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Times New Roman"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Courier New, Courier, monospace"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + +<div style="font-family: Verdana"> + <div style="font-family: FontDoesNotExist"> + Every line of text in this page should be in the same font. + </div> +</div> + + </body> +</html> diff --git a/layout/reftests/font-matching/apple-symbols-1-notref.html b/layout/reftests/font-matching/apple-symbols-1-notref.html new file mode 100644 index 0000000000..b216a4ff50 --- /dev/null +++ b/layout/reftests/font-matching/apple-symbols-1-notref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Apple Symbols test</title> +<style> +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} +body { + font-family: "Ahem", /* Ahem bullet first to establish consistent line metrics */ + /* "Apple Symbols", */ /* Apple Symbols for the rest of the chars */ + "Menlo", /* fallbacks for when Apple Symbols fails */ + "Hiragino Kaku Gothic Pro", + sans-serif; + font-size: 36px; + line-height: 60px; +} +</style> +</head> +<body> +∙◦◎☑☞ +</body> +</html> diff --git a/layout/reftests/font-matching/apple-symbols-1.html b/layout/reftests/font-matching/apple-symbols-1.html new file mode 100644 index 0000000000..ba92206f17 --- /dev/null +++ b/layout/reftests/font-matching/apple-symbols-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Apple Symbols test</title> +<style> +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} +body { + font-family: "Ahem", /* Ahem bullet first to establish consistent line metrics */ + "Apple Symbols", /* Apple Symbols for the rest of the chars */ + "Menlo", /* fallbacks for when Apple Symbols fails */ + "Hiragino Kaku Gothic Pro", + sans-serif; + font-size: 36px; + line-height: 60px; +} +</style> +</head> +<body> +∙◦◎☑☞ +</body> +</html> diff --git a/layout/reftests/font-matching/arial-arabic-ref.html b/layout/reftests/font-matching/arial-arabic-ref.html new file mode 100644 index 0000000000..f5665f6c53 --- /dev/null +++ b/layout/reftests/font-matching/arial-arabic-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Bug 769475 - test for italicized Arabic script in Arial</title> +<style type="text/css"> +body { + font-family: arial, serif; + font-size: 36px; + line-height: 72px; +} +span { + color: white; +} +</style> +</head> +<body lang="ar"> +<!-- the white span should have the same width whether it's italicized or not, + -- as Arial does not have Arabic characters in the italic face but we should + -- apply synthetic italic to the regular face, NOT fall back to a different + -- family from prefs. + --> +<div>العربي <span>العربي</span> العربي</div> +</body> +</html> diff --git a/layout/reftests/font-matching/arial-arabic.html b/layout/reftests/font-matching/arial-arabic.html new file mode 100644 index 0000000000..5f363ca261 --- /dev/null +++ b/layout/reftests/font-matching/arial-arabic.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Bug 769475 - test for italicized Arabic script in Arial</title> +<style type="text/css"> +body { + font-family: arial, serif; + font-size: 36px; + line-height: 72px; +} +span { + font-style: italic; + color: white; +} +</style> +</head> +<body lang="ar"> +<!-- the white span should have the same width whether it's italicized or not, + -- as Arial does not have Arabic characters in the italic face but we should + -- apply synthetic italic to the regular face, NOT fall back to a different + -- family from prefs. + --> +<div>العربي <span>العربي</span> العربي</div> +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-1-ref.html b/layout/reftests/font-matching/arial-variations-1-ref.html new file mode 100644 index 0000000000..5956b40c8d --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1 { font-family: Arial, sans-serif; } +p#test2 { font-family: Georgia, serif; } +p#test3 { font-family: Georgia, serif; } +p#test4 { font-family: Georgia, serif; } + +p#test1 { color: black; } +p#test2 { color: red; } +p#test3 { color: red; } +p#test4 { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1">{ font-family: Arial, sans-serif; }</p> +<p id="test2">{ font-family: Arial Bold, Georgia, serif; }</p> +<p id="test3">{ font-family: Arial Italic, Georgia, serif; }</p> +<p id="test4">{ font-family: Arial Bold Italic, Georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-1.html b/layout/reftests/font-matching/arial-variations-1.html new file mode 100644 index 0000000000..72c93ef9b8 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-1.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1 { font-family: Arial, sans-serif; } +p#test2 { font-family: Arial Bold, Georgia, serif; } +p#test3 { font-family: Arial Italic, Georgia, serif; } +p#test4 { font-family: Arial Bold Italic, Georgia, serif; } + +p#test1 { color: black; } +p#test2 { color: red; } +p#test3 { color: red; } +p#test4 { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1">{ font-family: Arial, sans-serif; }</p> +<p id="test2">{ font-family: Arial Bold, Georgia, serif; }</p> +<p id="test3">{ font-family: Arial Italic, Georgia, serif; }</p> +<p id="test4">{ font-family: Arial Bold Italic, Georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-2-ref.html b/layout/reftests/font-matching/arial-variations-2-ref.html new file mode 100644 index 0000000000..04c8c8601a --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-2-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1a { font-family: Arial, sans-serif; } +p#test2a { font-family: Georgia, serif; } +p#test3a { font-family: Georgia, serif; } +p#test4a { font-family: Georgia, serif; } + +p#test1a { color: black; } +p#test2a { color: red; } +p#test3a { color: red; } +p#test4a { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1a">{ font-family: arial, sans-serif; }</p> +<p id="test2a">{ font-family: arial bold, georgia, serif; }</p> +<p id="test3a">{ font-family: arial italic, georgia, serif; }</p> +<p id="test4a">{ font-family: arial bold italic, georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-2.html b/layout/reftests/font-matching/arial-variations-2.html new file mode 100644 index 0000000000..a6daf7157b --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-2.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1a { font-family: arial, sans-serif; } +p#test2a { font-family: arial bold, georgia, serif; } +p#test3a { font-family: arial italic, georgia, serif; } +p#test4a { font-family: arial bold italic, georgia, serif; } + +p#test1a { color: black; } +p#test2a { color: red; } +p#test3a { color: red; } +p#test4a { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1a">{ font-family: arial, sans-serif; }</p> +<p id="test2a">{ font-family: arial bold, georgia, serif; }</p> +<p id="test3a">{ font-family: arial italic, georgia, serif; }</p> +<p id="test4a">{ font-family: arial bold italic, georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-3-ref.html b/layout/reftests/font-matching/arial-variations-3-ref.html new file mode 100644 index 0000000000..625a51a49c --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-3-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1b { font-family: Georgia, serif; } +p#test2b { font-family: Georgia, serif; } +p#test3b { font-family: Georgia, serif; } +p#test4b { font-family: Georgia, serif; } + +p#test1b { color: red; } +p#test2b { color: red; } +p#test3b { color: red; } +p#test4b { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1b">{ font-family: ArialMT, Georgia, serif; }</p> +<p id="test2b">{ font-family: Arial-BoldMT, Georgia, serif; }</p> +<p id="test3b">{ font-family: Arial-ItalicMT, Georgia, serif; }</p> +<p id="test4b">{ font-family: Arial-BoldItalicMT, Georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-3.html b/layout/reftests/font-matching/arial-variations-3.html new file mode 100644 index 0000000000..ce1ca3ffc7 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-3.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1b { font-family: ArialMT, Georgia, serif; } +p#test2b { font-family: Arial-BoldMT, Georgia, serif; } +p#test3b { font-family: Arial-ItalicMT, Georgia, serif; } +p#test4b { font-family: Arial-BoldItalicMT, Georgia, serif; } + +p#test1b { color: red; } +p#test2b { color: red; } +p#test3b { color: red; } +p#test4b { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1b">{ font-family: ArialMT, Georgia, serif; }</p> +<p id="test2b">{ font-family: Arial-BoldMT, Georgia, serif; }</p> +<p id="test3b">{ font-family: Arial-ItalicMT, Georgia, serif; }</p> +<p id="test4b">{ font-family: Arial-BoldItalicMT, Georgia, serif; }</p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/arial-variations-4-ref.html b/layout/reftests/font-matching/arial-variations-4-ref.html new file mode 100644 index 0000000000..843851d254 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-4-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1c { font-family: Georgia, serif; } +p#test2c { font-family: Georgia, serif; } +p#test3c { font-family: Georgia, serif; } +p#test4c { font-family: Georgia, serif; } + +p#test1c { color: red; } +p#test2c { color: red; } +p#test3c { color: red; } +p#test4c { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1c">{ font-family: arialmt, georgia, serif; }</p> +<p id="test2c">{ font-family: arial-boldmt, georgia, serif; }</p> +<p id="test3c">{ font-family: arial-italicmt, georgia, serif; }</p> +<p id="test4c">{ font-family: arial-bolditalicmt, georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arial-variations-4.html b/layout/reftests/font-matching/arial-variations-4.html new file mode 100644 index 0000000000..a52d97daa6 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-4.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1c { font-family: arialmt, georgia, serif; } +p#test2c { font-family: arial-boldmt, georgia, serif; } +p#test3c { font-family: arial-italicmt, georgia, serif; } +p#test4c { font-family: arial-bolditalicmt, georgia, serif; } + +p#test1c { color: red; } +p#test2c { color: red; } +p#test3c { color: red; } +p#test4c { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1c">{ font-family: arialmt, georgia, serif; }</p> +<p id="test2c">{ font-family: arial-boldmt, georgia, serif; }</p> +<p id="test3c">{ font-family: arial-italicmt, georgia, serif; }</p> +<p id="test4c">{ font-family: arial-bolditalicmt, georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arial-variations-5-ref.html b/layout/reftests/font-matching/arial-variations-5-ref.html new file mode 100644 index 0000000000..583c5d51d7 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-5-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1d { font-family: Arial, sans-serif; } +p#test2d { font-family: Georgia, serif; } +p#test3d { font-family: Georgia, serif; } +p#test4d { font-family: Georgia, serif; } + +p#test1d { color: black; } +p#test2d { color: red; } +p#test3d { color: red; } +p#test4d { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1d">{ font-family: "Arial", sans-serif; }</p> +<p id="test2d">{ font-family: "Arial Bold", Georgia, serif; }</p> +<p id="test3d">{ font-family: "Arial Italic", Georgia, serif; }</p> +<p id="test4d">{ font-family: "Arial Bold Italic", Georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arial-variations-5.html b/layout/reftests/font-matching/arial-variations-5.html new file mode 100644 index 0000000000..73d2371282 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-5.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1d { font-family: "Arial", sans-serif; } +p#test2d { font-family: "Arial Bold", Georgia, serif; } +p#test3d { font-family: "Arial Italic", Georgia, serif; } +p#test4d { font-family: "Arial Bold Italic", Georgia, serif; } + +p#test1d { color: black; } +p#test2d { color: red; } +p#test3d { color: red; } +p#test4d { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1d">{ font-family: "Arial", sans-serif; }</p> +<p id="test2d">{ font-family: "Arial Bold", Georgia, serif; }</p> +<p id="test3d">{ font-family: "Arial Italic", Georgia, serif; }</p> +<p id="test4d">{ font-family: "Arial Bold Italic", Georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arial-variations-6-ref.html b/layout/reftests/font-matching/arial-variations-6-ref.html new file mode 100644 index 0000000000..60fba9530e --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-6-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1e { font-family: Arial, sans-serif; } +p#test2e { font-family: Georgia, serif; } +p#test3e { font-family: Georgia, serif; } +p#test4e { font-family: Georgia, serif; } + +p#test1e { color: black; } +p#test2e { color: red; } +p#test3e { color: red; } +p#test4e { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1e">{ font-family: "arial", sans-serif; }</p> +<p id="test2e">{ font-family: "arial bold", georgia, serif; }</p> +<p id="test3e">{ font-family: "arial italic", georgia, serif; }</p> +<p id="test4e">{ font-family: "arial bold italic", georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arial-variations-6.html b/layout/reftests/font-matching/arial-variations-6.html new file mode 100644 index 0000000000..0dd1e3b407 --- /dev/null +++ b/layout/reftests/font-matching/arial-variations-6.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Arial Variations</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +p#test1e { font-family: "arial", sans-serif; } +p#test2e { font-family: "arial bold", georgia, serif; } +p#test3e { font-family: "arial italic", georgia, serif; } +p#test4e { font-family: "arial bold italic", georgia, serif; } + +p#test1e { color: black; } +p#test2e { color: red; } +p#test3e { color: red; } +p#test4e { color: red; } + +#tests { + font-size: 18pt; + margin-left: 0.5em; +} + +</style> + +</head> +<body> + +<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p> + +<div id="tests"> +<p id="test1e">{ font-family: "arial", sans-serif; }</p> +<p id="test2e">{ font-family: "arial bold", georgia, serif; }</p> +<p id="test3e">{ font-family: "arial italic", georgia, serif; }</p> +<p id="test4e">{ font-family: "arial bold italic", georgia, serif; }</p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arialunicode-bold.html b/layout/reftests/font-matching/arialunicode-bold.html new file mode 100644 index 0000000000..3b765c3801 --- /dev/null +++ b/layout/reftests/font-matching/arialunicode-bold.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Arial Unicode MS, serif; font-weight: bold; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arialunicode-bolditalic.html b/layout/reftests/font-matching/arialunicode-bolditalic.html new file mode 100644 index 0000000000..728bead4fc --- /dev/null +++ b/layout/reftests/font-matching/arialunicode-bolditalic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Arial Unicode MS, serif; font-weight: bold; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arialunicode-italic.html b/layout/reftests/font-matching/arialunicode-italic.html new file mode 100644 index 0000000000..c9ab0231c3 --- /dev/null +++ b/layout/reftests/font-matching/arialunicode-italic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Arial Unicode MS, serif; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arialunicode-oblique.html b/layout/reftests/font-matching/arialunicode-oblique.html new file mode 100644 index 0000000000..c9ab0231c3 --- /dev/null +++ b/layout/reftests/font-matching/arialunicode-oblique.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Arial Unicode MS, serif; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/arialunicode.html b/layout/reftests/font-matching/arialunicode.html new file mode 100644 index 0000000000..92469691e7 --- /dev/null +++ b/layout/reftests/font-matching/arialunicode.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Arial Unicode MS, serif; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/bold-system-fallback-1-notref.html b/layout/reftests/font-matching/bold-system-fallback-1-notref.html new file mode 100644 index 0000000000..c6f8709f2e --- /dev/null +++ b/layout/reftests/font-matching/bold-system-fallback-1-notref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>Test for bold when system fallback is used</title> +</head> +<body> +<!-- + -- On OS X and Win7, the Plantagenet Cherokee font is only available in Regular weight. + -- + -- Cherokee text including <b> elements taken from + -- http://chr.wikipedia.org/wiki/%E1%8F%A9%E1%8E%A6%E1%8F%A7%E1%8E%A7%E1%8F%85%E1%8F%8D%E1%8F%95%E1%8E%BE_%E1%8E%A4%E1%8F%82%E1%8E%BE%E1%8F%97%E1%8F%85%E1%8F%97 + -- + --> +<p>ᏩᎦᏧᎧᏅᏍᏕᎾ ᎤᏂᎾᏗᏅᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎠᎵᏌᎳᏗᏍᎬ +ᎭᏫᎾᏗᏢ ᎠᏕᎸ ᏄᎾᏍᏛ ᎤᏂᎾᏗᏅᏗ ᎦᏣᏄᎳᎯᎨ ᎬᎾᏬᏍᎬ ᎤᎾᏤᎵ ᎧᏃᎮᏍᎩ ᏄᎵᏍᏔᏅ ᎢᎦᏘᎭ ᎢᎬᏁᎸ, ᎭᏫᎾᏗᏢ ᏧᏓᎴᎾᎢ +ᎠᎵᏐᏆᎸᏗ ᎤᏂᎾᏗᏅᏗ ᎦᏙ ᎤᏍᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎦᎶᏍᎬ.</p> +</body> +</html> diff --git a/layout/reftests/font-matching/bold-system-fallback-1.html b/layout/reftests/font-matching/bold-system-fallback-1.html new file mode 100644 index 0000000000..037f7306e3 --- /dev/null +++ b/layout/reftests/font-matching/bold-system-fallback-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>Test for bold when system fallback is used</title> +</head> +<body> +<!-- + -- On OS X and Win7, the Plantagenet Cherokee font is only available in Regular weight. + -- + -- Cherokee text including <b> elements taken from + -- http://chr.wikipedia.org/wiki/%E1%8F%A9%E1%8E%A6%E1%8F%A7%E1%8E%A7%E1%8F%85%E1%8F%8D%E1%8F%95%E1%8E%BE_%E1%8E%A4%E1%8F%82%E1%8E%BE%E1%8F%97%E1%8F%85%E1%8F%97 + -- + --> +<p><b>ᏩᎦᏧᎧᏅᏍᏕᎾ ᎤᏂᎾᏗᏅᏗ</b> ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎠᎵᏌᎳᏗᏍᎬ +ᎭᏫᎾᏗᏢ ᎠᏕᎸ ᏄᎾᏍᏛ ᎤᏂᎾᏗᏅᏗ ᎦᏣᏄᎳᎯᎨ ᎬᎾᏬᏍᎬ ᎤᎾᏤᎵ ᎧᏃᎮᏍᎩ ᏄᎵᏍᏔᏅ ᎢᎦᏘᎭ ᎢᎬᏁᎸ, ᎭᏫᎾᏗᏢ ᏧᏓᎴᎾᎢ +<b>ᎠᎵᏐᏆᎸᏗ ᎤᏂᎾᏗᏅᏗ</b> ᎦᏙ ᎤᏍᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎦᎶᏍᎬ.</p> +</body> +</html> diff --git a/layout/reftests/font-matching/bold-system-fallback-2-notref.html b/layout/reftests/font-matching/bold-system-fallback-2-notref.html new file mode 100644 index 0000000000..2a019c6de6 --- /dev/null +++ b/layout/reftests/font-matching/bold-system-fallback-2-notref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>Test for bold when system fallback is used</title> +</head> +<body> +<!-- + -- Chess symbols will use Droid Sans Fallback on Android, + -- which only has a single weight. + -- + -- On some platforms there may be "regular" glyphs in the Bold face + -- of the fallback font used (e.g. Menlo on OS X), so this will + -- not reliably pass there. + --> +<p>♔♕♖♗♘♙</p> +<p>♔♕♖♗♘♙</p> +</body> +</html> diff --git a/layout/reftests/font-matching/bold-system-fallback-2.html b/layout/reftests/font-matching/bold-system-fallback-2.html new file mode 100644 index 0000000000..40400a846e --- /dev/null +++ b/layout/reftests/font-matching/bold-system-fallback-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>Test for bold when system fallback is used</title> +</head> +<body> +<!-- + -- Chess symbols will use Droid Sans Fallback on Android, + -- which only has a single weight. + -- + -- On some platforms there may be "regular" glyphs in the Bold face + -- of the fallback font used (e.g. Menlo on OS X), so this will + -- not reliably pass there. + --> +<p>♔♕♖♗♘♙</p> +<p><b>♔♕♖♗♘♙</b></p> +</body> +</html> diff --git a/layout/reftests/font-matching/defaultfont-bold.html b/layout/reftests/font-matching/defaultfont-bold.html new file mode 100644 index 0000000000..8d4de33951 --- /dev/null +++ b/layout/reftests/font-matching/defaultfont-bold.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: bold; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultfont-bolditalic.html b/layout/reftests/font-matching/defaultfont-bolditalic.html new file mode 100644 index 0000000000..d8db0d7d9c --- /dev/null +++ b/layout/reftests/font-matching/defaultfont-bolditalic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: bold; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultfont-italic.html b/layout/reftests/font-matching/defaultfont-italic.html new file mode 100644 index 0000000000..76d4ca0e52 --- /dev/null +++ b/layout/reftests/font-matching/defaultfont-italic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultfont-oblique.html b/layout/reftests/font-matching/defaultfont-oblique.html new file mode 100644 index 0000000000..9930095dcb --- /dev/null +++ b/layout/reftests/font-matching/defaultfont-oblique.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-style: oblique; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultfont.html b/layout/reftests/font-matching/defaultfont.html new file mode 100644 index 0000000000..18629c8052 --- /dev/null +++ b/layout/reftests/font-matching/defaultfont.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +</style> +</head> +<body><p>Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultjapanese-bold.html b/layout/reftests/font-matching/defaultjapanese-bold.html new file mode 100644 index 0000000000..d25f250fae --- /dev/null +++ b/layout/reftests/font-matching/defaultjapanese-bold.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: bold; font-style: normal; } +</style> +</head> +<body><p id="test">魅力的な人</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultjapanese-bolditalic.html b/layout/reftests/font-matching/defaultjapanese-bolditalic.html new file mode 100644 index 0000000000..3487e2eea8 --- /dev/null +++ b/layout/reftests/font-matching/defaultjapanese-bolditalic.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: bold; font-style: italic; } +</style> +</head> +<body><p id="test">魅力的な人</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultjapanese-italic.html b/layout/reftests/font-matching/defaultjapanese-italic.html new file mode 100644 index 0000000000..0d7d4d0560 --- /dev/null +++ b/layout/reftests/font-matching/defaultjapanese-italic.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: normal; font-style: italic; } +</style> +</head> +<body><p id="test">魅力的な人</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultjapanese-oblique.html b/layout/reftests/font-matching/defaultjapanese-oblique.html new file mode 100644 index 0000000000..fb0c3d5429 --- /dev/null +++ b/layout/reftests/font-matching/defaultjapanese-oblique.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-style: oblique; } +</style> +</head> +<body><p id="test">魅力的な人</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/defaultjapanese.html b/layout/reftests/font-matching/defaultjapanese.html new file mode 100644 index 0000000000..ff3ad7b822 --- /dev/null +++ b/layout/reftests/font-matching/defaultjapanese.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-weight: normal; font-style: normal; } +</style> +</head> +<body><p id="test">魅力的な人</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/descriptor-ranges-ref.html b/layout/reftests/font-matching/descriptor-ranges-ref.html new file mode 100644 index 0000000000..b76460fb98 --- /dev/null +++ b/layout/reftests/font-matching/descriptor-ranges-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> + +<style id="dynamicStyles"> +</style> + +<div id="testContents" style="columns: 2; font-size: 10px;"> +</div> + +<script> +/* Reference file creates only a single face in each test font-family, + so that it will always have the expected rendering without relying + on the font-matching algorithm to choose between faces. */ +function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) { + return `@font-face { font-family: ${family}; src: url(../fonts/Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n`; +} +</script> + +<script src="descriptor-ranges.js"></script> diff --git a/layout/reftests/font-matching/descriptor-ranges.html b/layout/reftests/font-matching/descriptor-ranges.html new file mode 100644 index 0000000000..573e4398da --- /dev/null +++ b/layout/reftests/font-matching/descriptor-ranges.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset=utf-8> + +<style id="dynamicStyles"> +</style> + +<div id="testContents" style="columns: 2; font-size: 10px;"> +</div> + +<script> +/* Create font-family with two faces; the testcase to use the face with the + 'expectedMatch' descriptor, and not the 'unexpectedMatch'. So any testcase + whose text is replaced by Ahem glyphs has failed font-matching. */ +function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) { + return `@font-face { font-family: ${family}; src: url(../fonts/Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n` + + `@font-face { font-family: ${family}; src: url(../fonts/Ahem.ttf); ${descriptor}: ${unexpectedMatch}; }\n`; +} +</script> + +<script src="descriptor-ranges.js"></script> diff --git a/layout/reftests/font-matching/descriptor-ranges.js b/layout/reftests/font-matching/descriptor-ranges.js new file mode 100644 index 0000000000..e59bd0d45c --- /dev/null +++ b/layout/reftests/font-matching/descriptor-ranges.js @@ -0,0 +1,79 @@ +/* Script used by descriptor-ranges.html and descriptor-ranges-ref.html + to create @font-face rules and test elements for a collection of + font-matching testcases. */ + +// To create unique font-family names for each testcase. +let serial = 0; + +// Accumulators for the lists of @font-face rules and test elements. +let fontFaceRules = ""; +let testElements = ""; + +// Create a <div> element with the font properties to match. Its text reports +// the property-value and corresponding pair of descriptors being tested. +// (The associated createFontFaceRules() function is defined separately in the +// test and reference files.) +function createTestElement(family, weight, style, stretch, value, expected, unexpected) { + return `<div style="font-family:${family}; font-weight:${weight}; font-style:${style}; font-stretch:${stretch};">` + + `${family} ${value} (${expected} vs ${unexpected})</div>\n`; +} + +// Create testcases for the given descriptor. +// Each testcase has a test property value, and a list of @font-face descriptors +// to be matched against the property, where each descriptor in the list should +// be preferred over the next. +function testDescriptor(descriptorName, testCases) { + testElements += `<div style="background:yellow;padding:0.5em">Tests of ${descriptorName} descriptor:</div>\n`; + testCases.forEach(function (testCase) { + // Go though test cases, checking each descriptor has higher priority than next in the list + for (let i = 0; i < testCase.testDescriptors.length - 1; i++) { + serial++; + let expectedMatch = testCase.testDescriptors[i]; + let unexpectedMatch = testCase.testDescriptors[i + 1]; + let familyName = "test_" + serial; + fontFaceRules += createFontFaceRules(familyName, descriptorName, expectedMatch, unexpectedMatch); + let testWeight = (descriptorName == "font-weight") ? testCase.value : "normal"; + let testStyle = (descriptorName == "font-style") ? testCase.value : "normal"; + let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal"; + testElements += createTestElement(familyName, testWeight, testStyle, testStretch, + testCase.value, expectedMatch, unexpectedMatch); + } + }); +} + +// Testcases (from web-platform/tests/css/css-fonts/variations/at-font-face-font-matching.html, +// with a couple of extras). In each case, for the given property value, the testDescriptors +// are listed from 'best' to 'worse' match, as evaluated by the font-matching algorithm in +// https://drafts.csswg.org/css-fonts-4/#font-style-matching. +testDescriptor("font-weight", [ + { value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] }, + { value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] }, + { value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] }, + { value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] }, + { value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] }, + { value: "350", testDescriptors: ["200 300", "250 280", "420 450", "430 440", "445"] }, + { value: "550", testDescriptors: ["600 800", "700 900", "420 450", "430 440", "425"] } +]); + +testDescriptor("font-stretch", [ + { value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] }, + { value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] }, + { value: "90%", testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] }, +]); + +testDescriptor("font-style", [ + { value: "normal", testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, + { value: "italic", testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] }, + { value: "oblique 20deg", testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, + { value: "oblique 21deg", testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, + { value: "oblique 10deg", testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, + { value: "oblique 0deg", testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, + { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] }, + { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] }, + { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] }, +]); + +// Stuff the @font-face rules and test elements into the document. +// Any testcases that render Ahem glyphs are failures. +document.getElementById("dynamicStyles").innerHTML = fontFaceRules; +document.getElementById("testContents").innerHTML = testElements; diff --git a/layout/reftests/font-matching/emoji-fallback-1-ref.html b/layout/reftests/font-matching/emoji-fallback-1-ref.html new file mode 100644 index 0000000000..d7c6eb6a83 --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback</title> +<style> +div { + font-size: 48pt; +} +#test { + font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji'; + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>⌚⌛🌀🌁</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-fallback-1.html b/layout/reftests/font-matching/emoji-fallback-1.html new file mode 100644 index 0000000000..57fda93275 --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback</title> +<style> +div { + font-size: 48pt; +} +#test { + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>⌚⌛🌀🌁</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-fallback-2-ref.html b/layout/reftests/font-matching/emoji-fallback-2-ref.html new file mode 100644 index 0000000000..144f08f1b8 --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback to text font</title> +<style> +div { + font-size: 48pt; +} +#test { + font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols'; + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>⌚︎⌛︎🌀︎🌁︎</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-fallback-2.html b/layout/reftests/font-matching/emoji-fallback-2.html new file mode 100644 index 0000000000..e9aa618d6a --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback to text font</title> +<style> +div { + font-size: 48pt; +} +#test { + /* Because of the presence of the U+FE0E variation selectors, we should prefer the + the monochrome fonts even though color-emoji fonts are listed first. */ + font-family: 'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji', + 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols'; + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>⌚︎⌛︎🌀︎🌁︎</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-fallback-3-ref.html b/layout/reftests/font-matching/emoji-fallback-3-ref.html new file mode 100644 index 0000000000..94fee73901 --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-3-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback to color font</title> +<style> +div { + font-size: 48pt; +} +#test { + font-family: 'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji'; + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>🅰🅱</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-fallback-3.html b/layout/reftests/font-matching/emoji-fallback-3.html new file mode 100644 index 0000000000..42f4d09ec7 --- /dev/null +++ b/layout/reftests/font-matching/emoji-fallback-3.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji fallback to color font</title> +<style> +div { + font-size: 48pt; +} +#test { + /* Because of the presence of the U+FE0F variation selectors, we should find + a color-emoji font even though the b/w symbol fonts are listed first. */ + font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', + 'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji'; + font-size: 24pt; +} +</style> +</head> +<body> + +<div><span id=test>🅰️🅱️</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-keycap-notref.html b/layout/reftests/font-matching/emoji-keycap-notref.html new file mode 100644 index 0000000000..d4ec6f4003 --- /dev/null +++ b/layout/reftests/font-matching/emoji-keycap-notref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>keycap emoji</title> +<style> +#test { + font-size: 24pt; +} +</style> +</head> +<body> + +<div id=test> +<div>#⃣0⃣</div> +<div>##⃣0⃣</div> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-keycap.html b/layout/reftests/font-matching/emoji-keycap.html new file mode 100644 index 0000000000..5bc803566e --- /dev/null +++ b/layout/reftests/font-matching/emoji-keycap.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>keycap emoji</title> +<style> +#test { + font-size: 24pt; +} +</style> +</head> +<body> + +<div id=test> +<div>#️⃣0️⃣</div> +<div>##️⃣0️⃣</div> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-skintone-ref.html b/layout/reftests/font-matching/emoji-skintone-ref.html new file mode 100644 index 0000000000..77efa66820 --- /dev/null +++ b/layout/reftests/font-matching/emoji-skintone-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji with skintone</title> +<style> +#test { + font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols'; +} +</style> +</head> +<body> + +<div id=test> +<span>☝🏻☝︎☝🏻</span><br> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-skintone.html b/layout/reftests/font-matching/emoji-skintone.html new file mode 100644 index 0000000000..dcb4f106df --- /dev/null +++ b/layout/reftests/font-matching/emoji-skintone.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> +<meta charset="utf-8"> +<title>emoji with skintone</title> +<style> +#test { + font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols', 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji'; +} +</style> +</head> +<body> + +<div id=test> +<span>☝🏻☝︎☝🏻</span><br> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/emoji-subregion-flag-notref.html b/layout/reftests/font-matching/emoji-subregion-flag-notref.html new file mode 100644 index 0000000000..83d4c9a5de --- /dev/null +++ b/layout/reftests/font-matching/emoji-subregion-flag-notref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<h1>England: 🏴</h1> + diff --git a/layout/reftests/font-matching/emoji-subregion-flag.html b/layout/reftests/font-matching/emoji-subregion-flag.html new file mode 100644 index 0000000000..9ba29cf276 --- /dev/null +++ b/layout/reftests/font-matching/emoji-subregion-flag.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<h1>England: 🏴󠁧󠁢󠁥󠁮󠁧󠁿</h1> + diff --git a/layout/reftests/font-matching/fallback-respects-generic-1-ref.html b/layout/reftests/font-matching/fallback-respects-generic-1-ref.html new file mode 100644 index 0000000000..c812c5a03b --- /dev/null +++ b/layout/reftests/font-matching/fallback-respects-generic-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html lang="en-US"> +<meta charset="utf-8"> +<style> +.a { font: 32px serif; } +.b { font: 32px sans-serif; } +strut { font-size: 2em; } +</style> +<p>The first Chinese line should use the <tt>serif</tt> font setting from prefs; +the second should use the <tt>sans-serif</tt> font setting.</p> +<p class="a"><span lang="zh-CN">你好吗？</span><strut> </strut></p> +<p class="b"><span lang="zh-CN">你好吗？</span><strut> </strut></p> diff --git a/layout/reftests/font-matching/fallback-respects-generic-1.html b/layout/reftests/font-matching/fallback-respects-generic-1.html new file mode 100644 index 0000000000..a4b504e289 --- /dev/null +++ b/layout/reftests/font-matching/fallback-respects-generic-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html lang="en-US"> +<meta charset="utf-8"> +<style> +.a { font: 32px serif; } +.b { font: 32px sans-serif; } +strut { font-size: 2em; } /* to force stable line height/baseline position */ +</style> +<p>The first Chinese line should use the <tt>serif</tt> font setting from prefs; +the second should use the <tt>sans-serif</tt> font setting.</p> +<p class="a">你好吗？<strut> </strut></p> +<p class="b">你好吗？<strut> </strut></p> diff --git a/layout/reftests/font-matching/familyname-escapedidents-ref.html b/layout/reftests/font-matching/familyname-escapedidents-ref.html new file mode 100644 index 0000000000..2f54eb85a7 --- /dev/null +++ b/layout/reftests/font-matching/familyname-escapedidents-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Escaped family names test</title> +<meta charset="UTF-8"> +<style> +body { margin: 20px; } +#test, #test2 { font-family: serif; } +</style> + +</head> +<body> +<p id=test>Should be serif</p> +<p id=test2>Should be serif</p> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/familyname-escapedidents.html b/layout/reftests/font-matching/familyname-escapedidents.html new file mode 100644 index 0000000000..0a328d6b13 --- /dev/null +++ b/layout/reftests/font-matching/familyname-escapedidents.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Escaped family names test</title> +<meta charset="UTF-8"> +<style> +body { margin: 20px; } +#test { font-family: \20 Arial, \20 Verdana, \20 Deja Vu Sans, \20 Fira Sans, \20 Fira Sans OT, serif; } +#test2 { font-family: Arial\20 , Verdana\20 , Deja Vu Sans\20 , Fira Sans\20 , Fira Sans OT\20 , serif; } +</style> + +</head> +<body> +<p id=test>Should be serif</p> +<p id=test2>Should be serif</p> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/font-shorthand-stretch-1.html b/layout/reftests/font-matching/font-shorthand-stretch-1.html new file mode 100644 index 0000000000..1ac3073bf5 --- /dev/null +++ b/layout/reftests/font-matching/font-shorthand-stretch-1.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> +/* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */ +@font-face { + font-family: dvs; + src: url(../fonts/dejavu-sans/DejaVuSans.ttf); +} +@font-face { + font-family: dvs; + font-weight: bold; + src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-weight: bold; + src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf); +} +@font-face { /* note that there is no ExtraLight Condensed or Oblique */ + font-family: dvs; + font-weight: 200; + src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf); +} +@font-face { + font-family: dvs; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf); +} +@font-face { + font-family: dvs; + font-weight: bold; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-weight: bold; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf); +} + +body { + font-family: dvs, serif; + font-size: 24px; +} +.l { + font-weight: 200; +} +</style> +</head> +<body> +<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" --> +<div style="font: ultra-condensed 24px dvs, serif">ultra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: extra-condensed 24px dvs, serif">extra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: condensed 24px dvs, serif">condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: semi-condensed 24px dvs, serif">semi-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic --> +<div style="font: 24px dvs">normal <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: semi-expanded 24px dvs, serif">semi-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: expanded 24px dvs, serif">expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: extra-expanded 24px dvs, serif">extra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font: ultra-expanded 24px dvs, serif">ultra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +</body> +</html> + diff --git a/layout/reftests/font-matching/font-stretch-1-ref.html b/layout/reftests/font-matching/font-stretch-1-ref.html new file mode 100644 index 0000000000..2fe8f2cf31 --- /dev/null +++ b/layout/reftests/font-matching/font-stretch-1-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> +/* each face is loaded as a separate family, so we can address them individually + without involving the style-matching algorithm */ +@font-face { + font-family: dvs; + src: url(../fonts/dejavu-sans/DejaVuSans.ttf); +} +@font-face { + font-family: dvsb; + src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf); +} +@font-face { + font-family: dvsi; + src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf); +} +@font-face { + font-family: dvsbi; + src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf); +} +@font-face { /* note that there is no ExtraLight Condensed or Oblique */ + font-family: dvsl; + src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf); +} +@font-face { + font-family: dvsc; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf); +} +@font-face { + font-family: dvscb; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf); +} +@font-face { + font-family: dvsci; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf); +} +@font-face { + font-family: dvscbi; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf); +} + +body { + font-family: dvs, serif; + font-size: 24px; +} + +.b { font-family: dvsb; } +.i { font-family: dvsi; } +.bi { font-family: dvsbi; } +.l { font-family: dvsl; } +.c { font-family: dvsc; } +.cb { font-family: dvscb; } +.ci { font-family: dvsci; } +.cbi { font-family: dvscbi; } +</style> +</head> +<body> +<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" --> +<div class="c">ultra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div> +<div class="c">extra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div> +<div class="c">condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div> +<div class="c">semi-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div> +<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic --> +<div>normal <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div> +<div>semi-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div> +<div>expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div> +<div>extra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div> +<div>ultra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div> +</body> +</html> + diff --git a/layout/reftests/font-matching/font-stretch-1.html b/layout/reftests/font-matching/font-stretch-1.html new file mode 100644 index 0000000000..ca86a08ed9 --- /dev/null +++ b/layout/reftests/font-matching/font-stretch-1.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> +/* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */ +@font-face { + font-family: dvs; + src: url(../fonts/dejavu-sans/DejaVuSans.ttf); +} +@font-face { + font-family: dvs; + font-weight: bold; + src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-weight: bold; + src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf); +} +@font-face { /* note that there is no ExtraLight Condensed or Oblique */ + font-family: dvs; + font-weight: 200; + src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf); +} +@font-face { + font-family: dvs; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf); +} +@font-face { + font-family: dvs; + font-weight: bold; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf); +} +@font-face { + font-family: dvs; + font-style: italic; + font-weight: bold; + font-stretch: condensed; + src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf); +} + +body { + font-family: dvs, serif; + font-size: 24px; +} +.l { + font-weight: 200; +} +</style> +</head> +<body> +<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" --> +<div style="font-stretch: ultra-condensed">ultra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: extra-condensed">extra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: condensed">condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: semi-condensed">semi-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic --> +<div style="font-stretch: normal">normal <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: semi-expanded">semi-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: expanded">expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: extra-expanded">extra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +<div style="font-stretch: ultra-expanded">ultra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div> +</body> +</html> + diff --git a/layout/reftests/font-matching/font-synthesis-1-ref.html b/layout/reftests/font-matching/font-synthesis-1-ref.html new file mode 100644 index 0000000000..35e5911db3 --- /dev/null +++ b/layout/reftests/font-matching/font-synthesis-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@font-face { + font-family: test; + src: url(../fonts/sil/GenR102.ttf); +} +body { + font-family: test; /* family that lacks bold and italic faces */ + font-size: 36px; + margin: 1em; +} +</style> +</head> +<body> +<p>Hello, <i>cruel</i> <b>world<i>!</i></b> +<p>Hello, cruel <b>world!</b> +<p>Hello, <i>cruel</i> world<i>!</i> +<p>Hello, cruel world! +</body> +</html> diff --git a/layout/reftests/font-matching/font-synthesis-1.html b/layout/reftests/font-matching/font-synthesis-1.html new file mode 100644 index 0000000000..ebccfcac81 --- /dev/null +++ b/layout/reftests/font-matching/font-synthesis-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@font-face { + font-family: test; + src: url(../fonts/sil/GenR102.ttf); +} +body { + font-family: test; /* family that lacks bold and italic faces */ + font-size: 36px; + margin: 1em; +} +</style> +</head> +<body> +<p>Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:weight">Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:style">Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:none">Hello, <i>cruel</i> <b>world<i>!</i></b> +</body> +</html> diff --git a/layout/reftests/font-matching/font-synthesis-2-ref.html b/layout/reftests/font-matching/font-synthesis-2-ref.html new file mode 100644 index 0000000000..3bec8c0147 --- /dev/null +++ b/layout/reftests/font-matching/font-synthesis-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@font-face { + font-family: test; + src: url(../fonts/sil/GenR102.ttf); +} +body { + /* try for a locally-installed font that lacks Bold and Italic faces */ + font-family: Papyrus, /* OS X */ + Microsoft Sans Serif, /* Windows */ + /* XXX no idea what to try for Linux desktop systems :( */ + Droid Sans Fallback, /* Android, B2G */ + test; /* fallback to avoid failures on "none of the above" */ + font-size: 36px; + margin: 1em; +} +</style> +</head> +<body> +<p>Hello, <i>cruel</i> <b>world<i>!</i></b> +<p>Hello, cruel <b>world!</b> +<p>Hello, <i>cruel</i> world<i>!</i> +<p>Hello, cruel world! +</body> +</html> diff --git a/layout/reftests/font-matching/font-synthesis-2.html b/layout/reftests/font-matching/font-synthesis-2.html new file mode 100644 index 0000000000..408d5f7537 --- /dev/null +++ b/layout/reftests/font-matching/font-synthesis-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@font-face { + font-family: test; + src: url(../fonts/sil/GenR102.ttf); +} +body { + /* try for a locally-installed font that lacks Bold and Italic faces */ + font-family: Papyrus, /* OS X */ + Microsoft Sans Serif, /* Windows */ + /* XXX no idea what to try for Linux desktop systems :( */ + Droid Sans Fallback, /* Android, B2G */ + test; /* fallback to avoid failures on "none of the above" */ + font-size: 36px; + margin: 1em; +} +</style> +</head> +<body> +<p>Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:weight">Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:style">Hello, <i>cruel</i> <b>world<i>!</i></b> +<p style="font-synthesis:none">Hello, <i>cruel</i> <b>world<i>!</i></b> +</body> +</html> diff --git a/layout/reftests/font-matching/hiragino-kaku-1-notref.html b/layout/reftests/font-matching/hiragino-kaku-1-notref.html new file mode 100644 index 0000000000..c0f052d4b8 --- /dev/null +++ b/layout/reftests/font-matching/hiragino-kaku-1-notref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="font: 36px serif">こんにちは</div> diff --git a/layout/reftests/font-matching/hiragino-kaku-1.html b/layout/reftests/font-matching/hiragino-kaku-1.html new file mode 100644 index 0000000000..a3eee129db --- /dev/null +++ b/layout/reftests/font-matching/hiragino-kaku-1.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<!-- check that the legacy Hiragino Kaku Gothic name is recognized --> +<div style="font: 36px Hiragino Kaku Gothic ProN, serif">こんにちは</div> diff --git a/layout/reftests/font-matching/illformed-lang-tags-1.html b/layout/reftests/font-matching/illformed-lang-tags-1.html new file mode 100644 index 0000000000..31ae0914b7 --- /dev/null +++ b/layout/reftests/font-matching/illformed-lang-tags-1.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<style> +body { + font: 32px sans-serif; +} +.description { + font: 16px serif; +} +div { + position: relative; + height: 3em; +} +div p { + position: absolute; + color: red; +} +p + p { + color: green; +} +.red { + color: red; +} +.green { + color: green; +} +</style> +<body> +<p class=description>In each line, the <span class=green>green</span> glyphs should exactly overlay the <span class=red>red</span> ones:</p> +</body> +<script> +// Some ideographs that should have lang-specific font variants (examples found in +// https://en.wikipedia.org/wiki/Han_unification). +const doingTest = (location.search != "?ref"); +const testStr = "今令免入全关具刃化外情才抵次海直真示神空者草蔥角道雇骨"; +["zh-CN", "zh-HK", "zh-TW", "ja-JP", "ko-KR", "ja-JP-alalc97"].forEach((lang) => { + let div = document.createElement("div"); + document.body.appendChild(div); + // Create two layers of text, red and then green. In the test rendering, one layer + // has the "correct" lang tag, and the other has an ill-formed version with underscore; + // nevertheless we want it to render identically. + let p1 = document.createElement("p"); + p1.lang = lang; + p1.textContent = testStr; + div.appendChild(p1); + if (doingTest) { + lang = lang.replace("-", "_"); + } + let p2 = document.createElement("p"); + p2.lang = lang; + p2.textContent = testStr; + div.appendChild(p2); +}); +</script> diff --git a/layout/reftests/font-matching/impact-bold.html b/layout/reftests/font-matching/impact-bold.html new file mode 100644 index 0000000000..78a17c14cc --- /dev/null +++ b/layout/reftests/font-matching/impact-bold.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Impact, serif; font-weight: bold; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/impact-bolditalic.html b/layout/reftests/font-matching/impact-bolditalic.html new file mode 100644 index 0000000000..c0c273ce40 --- /dev/null +++ b/layout/reftests/font-matching/impact-bolditalic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Impact, serif; font-weight: bold; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/impact-italic.html b/layout/reftests/font-matching/impact-italic.html new file mode 100644 index 0000000000..ce6a3ca7df --- /dev/null +++ b/layout/reftests/font-matching/impact-italic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Impact, serif; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/impact-oblique.html b/layout/reftests/font-matching/impact-oblique.html new file mode 100644 index 0000000000..f9e378a0b4 --- /dev/null +++ b/layout/reftests/font-matching/impact-oblique.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Impact, serif; font-style: oblique; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/impact.html b/layout/reftests/font-matching/impact.html new file mode 100644 index 0000000000..4644a88e7b --- /dev/null +++ b/layout/reftests/font-matching/impact.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: Impact, serif; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/italic-oblique-1.html b/layout/reftests/font-matching/italic-oblique-1.html new file mode 100644 index 0000000000..ae7e70fa6b --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: italic 600% test, serif; } +</style> +</head> +<body> +<p>BBB</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-2.html b/layout/reftests/font-matching/italic-oblique-2.html new file mode 100644 index 0000000000..f5ae4c33b5 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markC.woff); + font-style: oblique; +} + +body { margin: 30px } +p { margin: 0; font: italic 600% test, serif; } +</style> +</head> +<body> +<p>CCC</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-3.html b/layout/reftests/font-matching/italic-oblique-3.html new file mode 100644 index 0000000000..5d1c95bfe6 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-3.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); + font-style: italic; +} + +@font-face { + font-family: test; + src: url(../fonts/mark2B.woff); + font-style: oblique; +} + +body { margin: 30px } +p { margin: 0; font: italic 600% test, serif; } +</style> +</head> +<body> +<p>BBB</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-4.html b/layout/reftests/font-matching/italic-oblique-4.html new file mode 100644 index 0000000000..92438c6a19 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-4.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/mark2B.woff); + font-style: oblique; +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: italic 600% test, serif; } +</style> +</head> +<body> +<p>BBB</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-5.html b/layout/reftests/font-matching/italic-oblique-5.html new file mode 100644 index 0000000000..d71ffa7803 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-5.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/mark2B.woff); + font-style: italic; +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); + font-style: oblique; +} + +body { margin: 30px } +p { margin: 0; font: oblique 600% test, serif; } +</style> +</head> +<body> +<p>BBB</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-6.html b/layout/reftests/font-matching/italic-oblique-6.html new file mode 100644 index 0000000000..3d249c504b --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-6.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); + font-style: italic; +} + +@font-face { + font-family: test; + src: url(../fonts/markC.woff); + font-style: oblique; +} + +body { margin: 30px } +p { margin: 0; font: oblique 600% test, serif; } +</style> +</head> +<body> +<p>CCC</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-7.html b/layout/reftests/font-matching/italic-oblique-7.html new file mode 100644 index 0000000000..3064fa534c --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-7.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); + font-style: oblique; +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/mark2B.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: oblique 600% test, serif; } +</style> +</head> +<body> +<p>AAA</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-8.html b/layout/reftests/font-matching/italic-oblique-8.html new file mode 100644 index 0000000000..13783610dd --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-8.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test1; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test2; + src: url(../fonts/markB.woff); + font-style: italic; +} + +@font-face { + font-family: test3; + src: url(../fonts/markC.woff); + font-style: oblique; +} + +@font-face { + font-family: test3; + src: url(../fonts/mark2C.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: oblique 600% test1, test2, test3, serif; } +</style> +</head> +<body> +<p>CCC</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-9.html b/layout/reftests/font-matching/italic-oblique-9.html new file mode 100644 index 0000000000..a669682abf --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-9.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test1; + src: url(../fonts/markA.woff); +} + +@font-face { + font-family: test2; + src: url(../fonts/markC.woff); + font-style: italic; +} + +@font-face { + font-family: test3; + src: url(../fonts/mark2C.woff); + font-style: oblique; +} + +@font-face { + font-family: test3; + src: url(../fonts/mark2A.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: oblique 600% test1, test2, test3, serif; } +</style> +</head> +<body> +<p>CCC</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-kinnari-ref.html b/layout/reftests/font-matching/italic-oblique-kinnari-ref.html new file mode 100644 index 0000000000..4499ebc0b4 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-kinnari-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/mark2A.woff); + font-style: oblique; +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markA.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: italic 300% kinnari, test, serif; } +</style> +</head> +<body> +<p>AAA</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-kinnari.html b/layout/reftests/font-matching/italic-oblique-kinnari.html new file mode 100644 index 0000000000..f465d247e4 --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-kinnari.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/mark2A.woff); + font-style: oblique; +} + +@font-face { + font-family: test; + src: url(../fonts/markB.woff); +} + +@font-face { + font-family: test; + src: url(../fonts/markA.woff); + font-style: italic; +} + +body { margin: 30px } +p { margin: 0; font: oblique 300% kinnari, test, serif; } +</style> +</head> +<body> +<p>AAA</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/italic-oblique-ref.html b/layout/reftests/font-matching/italic-oblique-ref.html new file mode 100644 index 0000000000..d1fc2939cb --- /dev/null +++ b/layout/reftests/font-matching/italic-oblique-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<head> +<title>style matching - italic/oblique</title> +<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop"> +<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching"> +<link rel="match" href="italic-oblique-1-ref.html"> +<meta name="flags" content="font matching must distinguish between italic and oblique"> +<style> +@font-face { + font-family: test; + src: url(../fonts/markA.woff); +} +body { margin: 30px } +p { margin: 0; font: 600% test, serif; } +</style> +</head> +<body> +<p>AAA</p> +</body> +</html> + + diff --git a/layout/reftests/font-matching/legacy-family-names-1-ref.html b/layout/reftests/font-matching/legacy-family-names-1-ref.html new file mode 100644 index 0000000000..71be452695 --- /dev/null +++ b/layout/reftests/font-matching/legacy-family-names-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<style> +body { font-family: Avenir Next, serif; font-weight: 900; } +</style> +<body> +Hello world +</body> diff --git a/layout/reftests/font-matching/legacy-family-names-1.html b/layout/reftests/font-matching/legacy-family-names-1.html new file mode 100644 index 0000000000..7cec0ffd45 --- /dev/null +++ b/layout/reftests/font-matching/legacy-family-names-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<style> +body { font-family: Avenir Next Heavy, serif; } +</style> +<body> +Hello world +</body> diff --git a/layout/reftests/font-matching/legacy-family-names-2-ref.html b/layout/reftests/font-matching/legacy-family-names-2-ref.html new file mode 100644 index 0000000000..2a9ba84246 --- /dev/null +++ b/layout/reftests/font-matching/legacy-family-names-2-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<style> +body { font-family: Arial, serif; font-weight: 900; } +</style> +<body> +Hello world +</body> diff --git a/layout/reftests/font-matching/legacy-family-names-2.html b/layout/reftests/font-matching/legacy-family-names-2.html new file mode 100644 index 0000000000..112a540742 --- /dev/null +++ b/layout/reftests/font-matching/legacy-family-names-2.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<style> +body { font-family: Arial Black, serif; } +</style> +<body> +Hello world +</body> diff --git a/layout/reftests/font-matching/localized-family-names-001-ref.html b/layout/reftests/font-matching/localized-family-names-001-ref.html new file mode 100644 index 0000000000..6cd0c22188 --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names (ref)</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test2 { font-family: "Apple LiSung"; } +#test3 { font-family: "BatangChe"; } +#test9 { font-family: "Dotum"; } +#test10 { font-family: "FangSong"; } +#test12 { font-family: "Gulim"; } +#test14 { font-family: "Gungsuh"; } +#test15 { font-family: "HY Kak Headline Std"; } +#test17 { font-family: "Hiragino Kaku Gothic Pro"; } +#test18 { font-family: "Hiragino Kaku Gothic StdN"; } +#test19 { font-family: "Hiragino Kaku Gothic Std"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test2">蘋果儷細宋 Apple LiSung</p> +<p id="test3">바탕체 BatangChe</p> +<p id="test9">돋움 Dotum</p> +<p id="test10">仿宋 FangSong</p> +<p id="test12">굴림 Gulim</p> +<p id="test14">궁서 Gungsuh</p> +<p id="test15">HY각헤드라인 Std HY Kak Headline Std</p> +<p id="test17">ヒラギノ角ゴ Pro Hiragino Kaku Gothic Pro</p> +<p id="test18">ヒラギノ角ゴ StdN Hiragino Kaku Gothic StdN</p> +<p id="test19">ヒラギノ角ゴ Std Hiragino Kaku Gothic Std</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-001.html b/layout/reftests/font-matching/localized-family-names-001.html new file mode 100644 index 0000000000..d5396a62b1 --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test2 { font-family: "蘋果儷細宋"; } +#test3 { font-family: "바탕체"; } +#test9 { font-family: "돋움"; } +#test10 { font-family: "仿宋"; } +#test12 { font-family: "굴림"; } +#test14 { font-family: "궁서"; } +#test15 { font-family: "HY각헤드라인 Std"; } +#test17 { font-family: "ヒラギノ角ゴ Pro"; } +#test18 { font-family: "ヒラギノ角ゴ StdN"; } +#test19 { font-family: "ヒラギノ角ゴ Std"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test2">蘋果儷細宋 Apple LiSung</p> +<p id="test3">바탕체 BatangChe</p> +<p id="test9">돋움 Dotum</p> +<p id="test10">仿宋 FangSong</p> +<p id="test12">굴림 Gulim</p> +<p id="test14">궁서 Gungsuh</p> +<p id="test15">HY각헤드라인 Std HY Kak Headline Std</p> +<p id="test17">ヒラギノ角ゴ Pro Hiragino Kaku Gothic Pro</p> +<p id="test18">ヒラギノ角ゴ StdN Hiragino Kaku Gothic StdN</p> +<p id="test19">ヒラギノ角ゴ Std Hiragino Kaku Gothic Std</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-002-ref.html b/layout/reftests/font-matching/localized-family-names-002-ref.html new file mode 100644 index 0000000000..6ab9a06e39 --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-002-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names (ref)</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test20 { font-family: "Hiragino Maru Gothic ProN"; } +#test22 { font-family: "Hiragino Mincho ProN"; } +#test23 { font-family: "Hiragino Mincho Pro"; } +#test24 { font-family: "KaiTi"; } +#test30 { font-family: "LiHei Pro"; } +#test31 { font-family: "LiSong Pro"; } +#test33 { font-family: "MS Mincho"; } +#test34 { font-family: "MS PGothic"; } +#test35 { font-family: "MS PMincho"; } +#test36 { font-family: "Malgun Gothic"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test20">ヒラギノ丸ゴ ProN Hiragino Maru Gothic ProN</p> +<p id="test22">ヒラギノ明朝 ProN Hiragino Mincho ProN</p> +<p id="test23">ヒラギノ明朝 Pro Hiragino Mincho Pro</p> +<p id="test24">楷体 KaiTi</p> +<p id="test30">儷黑 Pro LiHei Pro</p> +<p id="test31">儷宋 Pro LiSong Pro</p> +<p id="test33">ＭＳ 明朝 MS Mincho</p> +<p id="test34">ＭＳ Ｐゴシック MS PGothic</p> +<p id="test35">ＭＳ Ｐ明朝 MS PMincho</p> +<p id="test36">맑은 고딕 Malgun Gothic</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-002.html b/layout/reftests/font-matching/localized-family-names-002.html new file mode 100644 index 0000000000..5a7fffc2aa --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test20 { font-family: "ヒラギノ丸ゴ ProN"; } +#test22 { font-family: "ヒラギノ明朝 ProN"; } +#test23 { font-family: "ヒラギノ明朝 Pro"; } +#test24 { font-family: "楷体"; } +#test30 { font-family: "儷黑 Pro"; } +#test31 { font-family: "儷宋 Pro"; } +#test33 { font-family: "ＭＳ 明朝"; } +#test34 { font-family: "ＭＳ Ｐゴシック"; } +#test35 { font-family: "ＭＳ Ｐ明朝"; } +#test36 { font-family: "맑은 고딕"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test20">ヒラギノ丸ゴ ProN Hiragino Maru Gothic ProN</p> +<p id="test22">ヒラギノ明朝 ProN Hiragino Mincho ProN</p> +<p id="test23">ヒラギノ明朝 Pro Hiragino Mincho Pro</p> +<p id="test24">楷体 KaiTi</p> +<p id="test30">儷黑 Pro LiHei Pro</p> +<p id="test31">儷宋 Pro LiSong Pro</p> +<p id="test33">ＭＳ 明朝 MS Mincho</p> +<p id="test34">ＭＳ Ｐゴシック MS PGothic</p> +<p id="test35">ＭＳ Ｐ明朝 MS PMincho</p> +<p id="test36">맑은 고딕 Malgun Gothic</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-003-ref.html b/layout/reftests/font-matching/localized-family-names-003-ref.html new file mode 100644 index 0000000000..c1be37bdae --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-003-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names (ref)</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; + line-height: 1.8em; +} + +#test37 { font-family: "Meiryo"; } +#test38 { font-family: "Microsoft JhengHei"; } +#test39 { font-family: "Microsoft YaHei"; } +#test40 { font-family: "MingLiU-ExtB"; } +#test41 { font-family: "MingLiU"; } +#test43 { font-family: "MingLiU_HKSCS"; } +#test44 { font-family: "NSimSun"; } +#test46 { font-family: "PMingLiU"; } +#test47 { font-family: "Raanana"; } +#test48 { font-family: "STFangsong"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test37">メイリオ Meiryo</p> +<p id="test38">微軟正黑體 Microsoft JhengHei</p> +<p id="test39">微软雅黑 Microsoft YaHei</p> +<p id="test40">細明體-ExtB MingLiU-ExtB</p> +<p id="test41">細明體 MingLiU</p> +<p id="test43">細明體_HKSCS MingLiU_HKSCS</p> +<p id="test44">新宋体 NSimSun</p> +<p id="test46">新細明體 PMingLiU</p> +<p id="test47">רעננה Raanana</p> +<p id="test48">华文仿宋 STFangsong</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-003.html b/layout/reftests/font-matching/localized-family-names-003.html new file mode 100644 index 0000000000..e7a2cf1548 --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; + line-height: 1.8em; +} + +#test37 { font-family: "メイリオ"; } +#test38 { font-family: "微軟正黑體"; } +#test39 { font-family: "微软雅黑"; } +#test40 { font-family: "細明體-ExtB"; } +#test41 { font-family: "細明體"; } +#test43 { font-family: "細明體_HKSCS"; } +#test44 { font-family: "新宋体"; } +#test46 { font-family: "新細明體"; } +#test47 { font-family: "רעננה"; } +#test48 { font-family: "华文仿宋"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test37">メイリオ Meiryo</p> +<p id="test38">微軟正黑體 Microsoft JhengHei</p> +<p id="test39">微软雅黑 Microsoft YaHei</p> +<p id="test40">細明體-ExtB MingLiU-ExtB</p> +<p id="test41">細明體 MingLiU</p> +<p id="test43">細明體_HKSCS MingLiU_HKSCS</p> +<p id="test44">新宋体 NSimSun</p> +<p id="test46">新細明體 PMingLiU</p> +<p id="test47">רעננה Raanana</p> +<p id="test48">华文仿宋 STFangsong</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-004-ref.html b/layout/reftests/font-matching/localized-family-names-004-ref.html new file mode 100644 index 0000000000..6ef138d8be --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-004-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names (ref)</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test49 { font-family: "STHeiti"; } +#test51 { font-family: "STSong"; } +#test52 { font-family: "Sazanami Gothic"; } +#test53 { font-family: "Sazanami Mincho"; } +#test54 { font-family: "SimHei"; } +#test55 { font-family: "SimSun"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test49">华文黑体 STHeiti</p> +<p id="test51">华文宋体 STSong</p> +<p id="test52">さざなみゴシック Sazanami Gothic</p> +<p id="test53">さざなみ明朝 Sazanami Mincho</p> +<p id="test54">黑体 SimHei</p> +<p id="test55">宋体 SimSun</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/localized-family-names-004.html b/layout/reftests/font-matching/localized-family-names-004.html new file mode 100644 index 0000000000..52ff487485 --- /dev/null +++ b/layout/reftests/font-matching/localized-family-names-004.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Localized font family names</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 24px; +} + +#test49 { font-family: "华文黑体"; } +#test51 { font-family: "华文宋体"; } +#test52 { font-family: "さざなみゴシック"; } +#test53 { font-family: "さざなみ明朝"; } +#test54 { font-family: "黑体"; } +#test55 { font-family: "宋体"; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p id="test49">华文黑体 STHeiti</p> +<p id="test51">华文宋体 STSong</p> +<p id="test52">さざなみゴシック Sazanami Gothic</p> +<p id="test53">さざなみ明朝 Sazanami Mincho</p> +<p id="test54">黑体 SimHei</p> +<p id="test55">宋体 SimSun</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/lucidaconsole-bold.html b/layout/reftests/font-matching/lucidaconsole-bold.html new file mode 100644 index 0000000000..9b17188cd5 --- /dev/null +++ b/layout/reftests/font-matching/lucidaconsole-bold.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: "Lucida Console", serif; font-weight: bold; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/lucidaconsole-bolditalic.html b/layout/reftests/font-matching/lucidaconsole-bolditalic.html new file mode 100644 index 0000000000..2d9c82104a --- /dev/null +++ b/layout/reftests/font-matching/lucidaconsole-bolditalic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: "Lucida Console", serif; font-weight: bold; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/lucidaconsole-italic.html b/layout/reftests/font-matching/lucidaconsole-italic.html new file mode 100644 index 0000000000..1403a8ee9e --- /dev/null +++ b/layout/reftests/font-matching/lucidaconsole-italic.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: "Lucida Console", serif; font-style: italic; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/lucidaconsole-oblique.html b/layout/reftests/font-matching/lucidaconsole-oblique.html new file mode 100644 index 0000000000..7125faeaac --- /dev/null +++ b/layout/reftests/font-matching/lucidaconsole-oblique.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: "Lucida Console", serif; font-style: oblique; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/lucidaconsole.html b/layout/reftests/font-matching/lucidaconsole.html new file mode 100644 index 0000000000..f200475225 --- /dev/null +++ b/layout/reftests/font-matching/lucidaconsole.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML><html><head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> +body { margin: 50px; font-size: 72pt; } +#test { font-family: "Lucida Console", serif; } +</style> +</head> +<body><p id="test">Bongo</p></body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/normalmedium-notref.html b/layout/reftests/font-matching/normalmedium-notref.html new file mode 100644 index 0000000000..33925b92dd --- /dev/null +++ b/layout/reftests/font-matching/normalmedium-notref.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Mapping 400 to medium</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +p { font-size: 24pt; font-family: mplus1p; font-weight: 200; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<h4>The two lines below should match</h4> + +<p id="test1">Fiddling fiddlesticks!</p> +<p id="test2">Fiddling fiddlesticks!</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/normalmedium-ref.html b/layout/reftests/font-matching/normalmedium-ref.html new file mode 100644 index 0000000000..b8b8df4ce2 --- /dev/null +++ b/layout/reftests/font-matching/normalmedium-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Mapping 400 to medium</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +p { font-size: 24pt; font-family: mplus1p; font-weight: normal; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<h4>The two lines below should match</h4> + +<p id="test1">Fiddling fiddlesticks!</p> +<p id="test2">Fiddling fiddlesticks!</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/normalmedium.html b/layout/reftests/font-matching/normalmedium.html new file mode 100644 index 0000000000..7a29c5a66d --- /dev/null +++ b/layout/reftests/font-matching/normalmedium.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Mapping 400 to medium</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: mplus1p; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +p { font-size: 24pt; } +#test1 { font-family: mplus1p; font-weight: normal; } +#test2 { font-family: mplus1p; font-weight: 500; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<h4>The two lines below should match</h4> + +<p id="test1">Fiddling fiddlesticks!</p> +<p id="test2">Fiddling fiddlesticks!</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/osaka-mono-exists-ref.html b/layout/reftests/font-matching/osaka-mono-exists-ref.html new file mode 100644 index 0000000000..5e3ab9d467 --- /dev/null +++ b/layout/reftests/font-matching/osaka-mono-exists-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<style type="text/css"> +@font-face { + font-family: Ahem; + src: local("Ahem"), url("../fonts/Ahem.ttf"); + unicode-range: U+0-7F; /* ASCII only */ +} +div { font-size: 50px; line-height: 100px; } +.ref { font-family: Ahem, "Osaka", serif; writing-mode: vertical-rl; } +</style> +</head> +<body> +<p>The two Japanese characters below should use the same font: +if "Osaka" is present, the name "Osaka-Mono" should also work.</p> +<div><span class=ref>絵</div> +<div><span class=ref>絵</div> +</body> +</html> diff --git a/layout/reftests/font-matching/osaka-mono-exists.html b/layout/reftests/font-matching/osaka-mono-exists.html new file mode 100644 index 0000000000..d73ac216e6 --- /dev/null +++ b/layout/reftests/font-matching/osaka-mono-exists.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<style type="text/css"> +@font-face { + font-family: Ahem; + src: local("Ahem"), url("../fonts/Ahem.ttf"); + unicode-range: U+0-7F; /* ASCII only */ +} +div { font-size: 50px; line-height: 100px; } +/* We use vertical writing-mode because in horizontal mode, the Regular and Mono + faces have slightly different line-height metrics, and so although the glyph + would match, its positioning would differ. */ +.ref { font-family: Ahem, "Osaka", serif; writing-mode: vertical-rl; } +.test { font-family: Ahem, "Osaka-Mono", serif; writing-mode: vertical-rl; } +</style> +</head> +<body> +<p>The two Japanese characters below should use the same font: +if "Osaka" is present, the name "Osaka-Mono" should also work.</p> +<div><span class=ref>絵</div> +<div><span class=test>絵</div> +</body> +</html> diff --git a/layout/reftests/font-matching/osaka-mono-ref.html b/layout/reftests/font-matching/osaka-mono-ref.html new file mode 100644 index 0000000000..ae6e6468f4 --- /dev/null +++ b/layout/reftests/font-matching/osaka-mono-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<style type="text/css"> +textarea { font-family: "Osaka-Mono"; font-size: 72pt; } +</style> +</head> +<body><textarea>海の絵</textarea></body> +</html> diff --git a/layout/reftests/font-matching/osaka-mono.html b/layout/reftests/font-matching/osaka-mono.html new file mode 100644 index 0000000000..9202df1f86 --- /dev/null +++ b/layout/reftests/font-matching/osaka-mono.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<style type="text/css"> +textarea { font-size: 72pt; } +</style> +</head> +<body><textarea>海の絵</textarea></body> +</html> diff --git a/layout/reftests/font-matching/reftest.list b/layout/reftests/font-matching/reftest.list new file mode 100644 index 0000000000..cae9aa3d66 --- /dev/null +++ b/layout/reftests/font-matching/reftest.list @@ -0,0 +1,195 @@ +# Font-matching reftests may fail intermittently/transiently due to asynch fallback, +# so we disable the async mechanism for this directory. +defaults pref(gfx.font_rendering.fallback.async,false) + +== CSS21-t1502-no-inherited-font-family.xhtml CSS21-t1502-no-inherited-font-family-ref.xhtml + +# tests for bug 1394311 (case-insensitive lang tag processing) +# (First attempt is random-if(windows 7), due to intermittent failure with a +# single missing character - see bug 1451723 & more generally bug 1392106.) +pref(font.default.zh-CN,"serif") pref(font.default.zh-TW,"serif") pref(font.default.ja,"serif") pref(font.default.ko,"serif") == 1394311.htm 1394311-ref.htm +pref(font.default.zh-CN,"sans-serif") pref(font.default.zh-TW,"sans-serif") pref(font.default.ja,"sans-serif") pref(font.default.ko,"sans-serif") skip-if(winWidget&&/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1394311.htm 1394311-ref.htm + +# tests for bug 1367860 (correct default generic font based on language) +== 1367860-1.htm 1367860-ref.htm +== 1367860-2.htm 1367860-ref.htm +== 1367860-3.htm 1367860-ref.htm + +# Test for bug 1458158: Arabic text in Arial weight 900 should fall back to Bold rather than Regular. +# Limited to Windows because this is specific to the fonts shipped on Windows by default. +skip-if(!winWidget) == 1458158-1.html 1458158-1-ref.html + +# basic tests for bug 538730 +!= synthetic-bold-1.html synthetic-bold-1-ref.html +!= synthetic-bold-2.html synthetic-bold-2-ref.html + +# synthetic bold/italic tests +!= defaultfont-bold.html defaultfont.html +!= defaultfont-italic.html defaultfont.html +!= defaultfont-oblique.html defaultfont.html +!= defaultfont-bolditalic.html defaultfont.html +!= defaultfont-bolditalic.html defaultfont-bold.html + +!= defaultjapanese-bold.html defaultjapanese.html +!= defaultjapanese-italic.html defaultjapanese.html +!= defaultjapanese-oblique.html defaultjapanese.html +!= defaultjapanese-bolditalic.html defaultjapanese.html +!= defaultjapanese-bolditalic.html defaultjapanese-bold.html + +random-if(cocoaWidget) != impact-bold.html impact.html # bug 539418 +!= impact-italic.html impact.html +!= impact-oblique.html impact.html +!= impact-bolditalic.html impact.html +!= impact-bolditalic.html impact-bold.html + +!= arialunicode-bold.html arialunicode.html +!= arialunicode-italic.html arialunicode.html +!= arialunicode-oblique.html arialunicode.html +!= arialunicode-bolditalic.html arialunicode.html +!= arialunicode-bolditalic.html arialunicode-bold.html + +!= lucidaconsole-bold.html lucidaconsole.html +!= lucidaconsole-italic.html lucidaconsole.html +!= lucidaconsole-oblique.html lucidaconsole.html +!= lucidaconsole-bolditalic.html lucidaconsole.html +!= lucidaconsole-bolditalic.html lucidaconsole-bold.html + +# checking that we don't match fullnames, psnames (see bug 538103) +== arial-variations-1.html arial-variations-1-ref.html +== arial-variations-2.html arial-variations-2-ref.html +== arial-variations-3.html arial-variations-3-ref.html +== arial-variations-4.html arial-variations-4-ref.html +== arial-variations-5.html arial-variations-5-ref.html +== arial-variations-6.html arial-variations-6-ref.html + +# localized font family names should always match just as English names do +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),255-255,400-400) == localized-family-names-001.html localized-family-names-001-ref.html # Bug 1392106 +== localized-family-names-002.html localized-family-names-002-ref.html +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),255-255,2725-2725) == localized-family-names-003.html localized-family-names-003-ref.html # Bug 1392106 +== localized-family-names-004.html localized-family-names-004-ref.html + +# family names with escaped spaces shouldn't match the names without the spaces +fails-if(gtkWidget) == familyname-escapedidents.html familyname-escapedidents-ref.html # bug 1309425, bug 1328771 + +# weight mapping tests +== normalmedium.html normalmedium-ref.html +!= normalmedium.html normalmedium-notref.html + +# Linux fails due to bug 604815 +== weightmapping-12.html weightmapping-12-ref.html +== weightmapping-25.html weightmapping-25-ref.html +== weightmapping-45.html weightmapping-45-ref.html +== weightmapping-458.html weightmapping-458-ref.html +== weightmapping-478.html weightmapping-478-ref.html +== weightmapping-7.html weightmapping-7-ref.html +== weightmapping-12579.html weightmapping-12579-ref.html + +== stretchmapping-all.html stretchmapping-all-ref.html +== stretchmapping-reverse.html stretchmapping-reverse-ref.html +fuzzy-if(Android,0-4,0-8) == stretchmapping-35.html stretchmapping-35-ref.html +== stretchmapping-137.html stretchmapping-137-ref.html + +# test for font-stretch using @font-face +== font-stretch-1.html font-stretch-1-ref.html +== font-shorthand-stretch-1.html font-stretch-1-ref.html + +# bug 724231 - applying synthetic styles to a single @font-face font +# should apply artificial obliquing, not switch to a true styled face +fails-if(geckoview) != synthetic-style-1.html synthetic-style-1-notref.html # Bug 1558513 for GV +fails-if(geckoview) != synthetic-style-2.html synthetic-style-2-notref.html # Bug 1558513 for GV + +# Bug 765906 - synthetic bold should be used if necessary together with system fallback. +# **NOTE** we skip these on Linux because of bug 769659. +# test 1 uses Cherokee; expected to pass on OS X and Win7 +random-if(!cocoaWidget) skip-if(gtkWidget) != bold-system-fallback-1.html bold-system-fallback-1-notref.html +# test 2 uses Chess symbols; expected to pass on Android +random-if(!Android) skip-if(gtkWidget) != bold-system-fallback-2.html bold-system-fallback-2-notref.html + +# Bug 769475 - applying 'italic' to Arabic text in Arial should NOT change family or metrics. +# Expected to pass on MacOSX and Windows; other platforms unknown, depending on font availability. +random-if(!(cocoaWidget||winWidget)) == arial-arabic.html arial-arabic-ref.html + +!= syntheticbold-rotated.html syntheticbold-rotated-ref.html + +== font-synthesis-1.html font-synthesis-1-ref.html +== font-synthesis-2.html font-synthesis-2-ref.html + +# Bug 1060791 - support for format 10 cmap in Apple Symbols; +# relevant fonts not present on other platforms. +skip-if(!cocoaWidget) != apple-symbols-1.html apple-symbols-1-notref.html + +# distinguish between italic and oblique +== simple-oblique.html simple-oblique-ref.html +== italic-oblique-1.html italic-oblique-ref.html +== italic-oblique-2.html italic-oblique-ref.html +== italic-oblique-3.html italic-oblique-ref.html +== italic-oblique-4.html italic-oblique-ref.html +== italic-oblique-5.html italic-oblique-ref.html +== italic-oblique-6.html italic-oblique-ref.html +== italic-oblique-7.html italic-oblique-ref.html +== italic-oblique-8.html italic-oblique-ref.html +== italic-oblique-9.html italic-oblique-ref.html +!= italic-oblique-kinnari.html italic-oblique-kinnari-ref.html + +# GTK and Windows 7 don't have full emoji and symbol font, so emoji-fallback-2 +# don't work well. +== emoji-fallback-1.html emoji-fallback-1-ref.html +skip-if(gtkWidget||/^Windows\x20NT\x206\.1/.test(http.oscpu)) == emoji-fallback-2.html emoji-fallback-2-ref.html +== emoji-fallback-3.html emoji-fallback-3-ref.html +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) != emoji-keycap.html emoji-keycap-notref.html +== emoji-skintone.html emoji-skintone-ref.html +# Random on Android because font availability varies depending on the version/device. +random-if(Android) != emoji-subregion-flag.html emoji-subregion-flag-notref.html + +# system font generic per-language tests, only works under OSX currently +# Bug 1212731 - initial implementation caused startup regression and +# regression with full-width digits display in UI elements. Disable +# tests until these problems are corrected. +# random-if(!OSX) == system-generic-fallback-1.html system-generic-fallback-1-ref.html +# random-if(!OSX) == system-generic-fallback-2.html system-generic-fallback-2-ref.html +# random-if(!OSX) == system-generic-fallback-3.html system-generic-fallback-3-ref.html +# random-if(!OSX) == system-generic-fallback-4.html system-generic-fallback-4-ref.html +# random-if(!OSX) != system-generic-fallback-ko.html system-generic-fallback-ja.html +# random-if(!OSX) != system-generic-fallback-zh-tw.html system-generic-fallback-ja.html +# random-if(!OSX) != system-generic-fallback-zh-cn.html system-generic-fallback-ja.html +# random-if(!OSX) != system-generic-fallback-zh-tw.html system-generic-fallback-zh-cn.html + +# Tests for legacy font family name (GDI-model families) matching; +# these depend on specific fonts that are available as standard on macOS and Windows, +# and are not expected to pass on platforms that don't have those same fonts. +skip-if(!cocoaWidget) == legacy-family-names-1.html legacy-family-names-1-ref.html +skip-if(!winWidget) == legacy-family-names-2.html legacy-family-names-2-ref.html + +== descriptor-ranges.html descriptor-ranges-ref.html + +# Test that prefs font fallback respects the CSS generic from content (bug 1687426) +skip-if(Android) == fallback-respects-generic-1.html fallback-respects-generic-1-ref.html # fonts present on Android are too unpredictable for easy testing + +skip-if(Android) != system-ui-fallback.html system-ui-fallback-notref.html # Roboto supports the characters in the reftest, and that's better behavior. +== system-ui-fallback-2.html system-ui-fallback-2-ref.html + +# Japanese monospace font on macOS is Osaka-mono +# If Osaka is present then Osaka-mono should also be available. +skip-if(!cocoaWidget) == osaka-mono-exists.html osaka-mono-exists-ref.html +# Disabled because Osaka-Mono isn't available on automation. +# skip-if(!cocoaWidget) == osaka-mono.html osaka-mono-ref.html + +# Try to use Wingdings font (assumed present on Windows and macOS) +random-if(!winWidget&&!cocoaWidget) == wingdings-1.html wingdings-1-ref.html +random-if(!winWidget&&!cocoaWidget) != wingdings-1.html wingdings-1-notref.html + +== illformed-lang-tags-1.html illformed-lang-tags-1.html?ref + +# Test for legacy name of Hiragino Sans, expected to work on macOS only +skip-if(!cocoaWidget) != hiragino-kaku-1.html hiragino-kaku-1-notref.html + +pref(ui.font.menu,"serif") == system-font-pref.html system-font-pref.html +# These make some assumptions about the menu font that seem to hold across +# platforms, like menu being a sans font by default. +test-pref(ui.font.menu,"serif") != system-font-pref.html system-font-pref.html +pref(ui.font.menu,"serif") test-pref(ui.font.menu.italic,true) != system-font-pref.html system-font-pref.html +pref(ui.font.menu,"serif") test-pref(ui.font.menu.size,"2.0") != system-font-pref.html system-font-pref.html +pref(ui.font.menu,"serif") test-pref(ui.font.menu.weight,"800") != system-font-pref.html system-font-pref.html + +# Reset default prefs. +defaults diff --git a/layout/reftests/font-matching/simple-oblique-ref.html b/layout/reftests/font-matching/simple-oblique-ref.html new file mode 100644 index 0000000000..d021f51d02 --- /dev/null +++ b/layout/reftests/font-matching/simple-oblique-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>oblique italic equivalence</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 300%; +} + +#sans { font-family: sans-serif; } +#serif { font-family: serif; } +#mono { font-family: monospace; } + +p { + margin: 0; + font-style: italic; + line-height: 1.3em; +} +</style> + +</head> +<body> + +<p id=sans>UNICORN asteroid</p> +<p id=serif>UNICORN asteroid</p> +<p id=mono>UNICORN asteroid</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/simple-oblique.html b/layout/reftests/font-matching/simple-oblique.html new file mode 100644 index 0000000000..cb4671f4d8 --- /dev/null +++ b/layout/reftests/font-matching/simple-oblique.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>oblique italic equivalence</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-size: 300%; +} + +#sans { font-family: sans-serif; } +#serif { font-family: serif; } +#mono { font-family: monospace; } + +p { + margin: 0; + font-style: oblique; + line-height: 1.3em; +} +</style> + +</head> +<body> + +<p id=sans>UNICORN asteroid</p> +<p id=serif>UNICORN asteroid</p> +<p id=mono>UNICORN asteroid</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/stretchmapping-137-ref.html b/layout/reftests/font-matching/stretchmapping-137-ref.html new file mode 100644 index 0000000000..a42b81c836 --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-137-ref.html @@ -0,0 +1,348 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +table { + border-collapse: collapse; + font-size: 28px; +} + +td { + padding: 0; margin: 0; + font-family: test; +} + +th { + font-weight: inherit; +} + +p { width: 300px; } + +.red { color: red; } + +thead { font-weight: 400; font-size: 75%; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; + font-stretch: ultra-condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: 400; + font-stretch: ultra-condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; + font-stretch: expanded; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; + font-stretch: expanded; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +.w1 .fs1 { font-family: test100; } +.w2 .fs1 { font-family: test100; } +.w3 .fs1 { font-family: test100; } +.w4 .fs1 { font-family: test400; } +.w5 .fs1 { font-family: test400; } +.w6 .fs1 { font-family: test400; } +.w7 .fs1 { font-family: test400; } +.w8 .fs1 { font-family: test400; } +.w9 .fs1 { font-family: test400; } + +.w1 .fs2 { font-family: test100; } +.w2 .fs2 { font-family: test100; } +.w3 .fs2 { font-family: test100; } +.w4 .fs2 { font-family: test400; } +.w5 .fs2 { font-family: test400; } +.w6 .fs2 { font-family: test400; } +.w7 .fs2 { font-family: test400; } +.w8 .fs2 { font-family: test400; } +.w9 .fs2 { font-family: test400; } + +.w1 .fs3 { font-family: test200; } +.w2 .fs3 { font-family: test200; } +.w3 .fs3 { font-family: test200; } +.w4 .fs3 { font-family: test200; } +.w5 .fs3 { font-family: test200; } +.w6 .fs3 { font-family: test800; } +.w7 .fs3 { font-family: test800; } +.w8 .fs3 { font-family: test800; } +.w9 .fs3 { font-family: test800; } + +.w1 .fs4 { font-family: test200; } +.w2 .fs4 { font-family: test200; } +.w3 .fs4 { font-family: test200; } +.w4 .fs4 { font-family: test200; } +.w5 .fs4 { font-family: test200; } +.w6 .fs4 { font-family: test800; } +.w7 .fs4 { font-family: test800; } +.w8 .fs4 { font-family: test800; } +.w9 .fs4 { font-family: test800; } + +.w1 .fs5 { font-family: test200; } +.w2 .fs5 { font-family: test200; } +.w3 .fs5 { font-family: test200; } +.w4 .fs5 { font-family: test200; } +.w5 .fs5 { font-family: test200; } +.w6 .fs5 { font-family: test800; } +.w7 .fs5 { font-family: test800; } +.w8 .fs5 { font-family: test800; } +.w9 .fs5 { font-family: test800; } + +.w1 .fs6 { font-family: test500; } +.w2 .fs6 { font-family: test500; } +.w3 .fs6 { font-family: test500; } +.w4 .fs6 { font-family: test500; } +.w5 .fs6 { font-family: test500; } +.w6 .fs6 { font-family: test900; } +.w7 .fs6 { font-family: test900; } +.w8 .fs6 { font-family: test900; } +.w9 .fs6 { font-family: test900; } + +.w1 .fs7 { font-family: test500; } +.w2 .fs7 { font-family: test500; } +.w3 .fs7 { font-family: test500; } +.w4 .fs7 { font-family: test500; } +.w5 .fs7 { font-family: test500; } +.w6 .fs7 { font-family: test900; } +.w7 .fs7 { font-family: test900; } +.w8 .fs7 { font-family: test900; } +.w9 .fs7 { font-family: test900; } + +.w1 .fs8 { font-family: test500; } +.w2 .fs8 { font-family: test500; } +.w3 .fs8 { font-family: test500; } +.w4 .fs8 { font-family: test500; } +.w5 .fs8 { font-family: test500; } +.w6 .fs8 { font-family: test900; } +.w7 .fs8 { font-family: test900; } +.w8 .fs8 { font-family: test900; } +.w9 .fs8 { font-family: test900; } + +.w1 .fs9 { font-family: test500; } +.w2 .fs9 { font-family: test500; } +.w3 .fs9 { font-family: test500; } +.w4 .fs9 { font-family: test500; } +.w5 .fs9 { font-family: test500; } +.w6 .fs9 { font-family: test900; } +.w7 .fs9 { font-family: test900; } +.w8 .fs9 { font-family: test900; } +.w9 .fs9 { font-family: test900; } + +</style> +</head> +<body> + +<p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p> + +<table> +<thead> +<th></th> +<th class="red">1</th> +<th>2</th> +<th class="red">3</th> +<th>4</th> +<th>5</th> +<th>6</th> +<th class="red">7</th> +<th>8</th> +<th>9</th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/font-matching/stretchmapping-137.html b/layout/reftests/font-matching/stretchmapping-137.html new file mode 100644 index 0000000000..81f45f66de --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-137.html @@ -0,0 +1,268 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +table { + border-collapse: collapse; + font-size: 28px; +} + +td { + padding: 0; margin: 0; + font-family: test; +} + +th { + font-weight: inherit; +} + +p { width: 300px; } + +.red { color: red; } + +thead { font-weight: 400; font-size: 75%; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; + font-stretch: ultra-condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: 400; + font-stretch: ultra-condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; + font-stretch: expanded; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; + font-stretch: expanded; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +.fs1 { font-stretch: ultra-condensed; } +.fs2 { font-stretch: extra-condensed; } +.fs3 { font-stretch: condensed; } +.fs4 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs6 { font-stretch: semi-expanded; } +.fs7 { font-stretch: expanded; } +.fs8 { font-stretch: extra-expanded; } +.fs9 { font-stretch: ultra-expanded; } + +</style> +</head> +<body> + +<p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p> + +<table> +<thead> +<th></th> +<th class="red">1</th> +<th>2</th> +<th class="red">3</th> +<th>4</th> +<th>5</th> +<th>6</th> +<th class="red">7</th> +<th>8</th> +<th>9</th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="fs1"><span>か</span></td> +<td class="fs2"><span>か</span></td> +<td class="fs3"><span>か</span></td> +<td class="fs4"><span>か</span></td> +<td class="fs5"><span>か</span></td> +<td class="fs6"><span>か</span></td> +<td class="fs7"><span>か</span></td> +<td class="fs8"><span>か</span></td> +<td class="fs9"><span>か</span></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/font-matching/stretchmapping-35-ref.html b/layout/reftests/font-matching/stretchmapping-35-ref.html new file mode 100644 index 0000000000..2124a68742 --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-35-ref.html @@ -0,0 +1,320 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +table { + border-collapse: collapse; + font-size: 28px; +} + +td { + padding: 0; margin: 0; + font-family: test; +} + +th { + font-weight: inherit; +} + +p { width: 300px; } + +.red { color: red; } + +thead { font-weight: 400; font-size: 75%; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; + font-stretch: condensed; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +.w1 .fs1 { font-family: test100; } +.w2 .fs1 { font-family: test100; } +.w3 .fs1 { font-family: test100; } +.w4 .fs1 { font-family: test100; } +.w5 .fs1 { font-family: test100; } +.w6 .fs1 { font-family: test900; } +.w7 .fs1 { font-family: test900; } +.w8 .fs1 { font-family: test900; } +.w9 .fs1 { font-family: test900; } + +.w1 .fs2 { font-family: test100; } +.w2 .fs2 { font-family: test100; } +.w3 .fs2 { font-family: test100; } +.w4 .fs2 { font-family: test100; } +.w5 .fs2 { font-family: test100; } +.w6 .fs2 { font-family: test900; } +.w7 .fs2 { font-family: test900; } +.w8 .fs2 { font-family: test900; } +.w9 .fs2 { font-family: test900; } + +.w1 .fs3 { font-family: test100; } +.w2 .fs3 { font-family: test100; } +.w3 .fs3 { font-family: test100; } +.w4 .fs3 { font-family: test100; } +.w5 .fs3 { font-family: test100; } +.w6 .fs3 { font-family: test900; } +.w7 .fs3 { font-family: test900; } +.w8 .fs3 { font-family: test900; } +.w9 .fs3 { font-family: test900; } + +.w1 .fs4 { font-family: test100; } +.w2 .fs4 { font-family: test100; } +.w3 .fs4 { font-family: test100; } +.w4 .fs4 { font-family: test100; } +.w5 .fs4 { font-family: test100; } +.w6 .fs4 { font-family: test900; } +.w7 .fs4 { font-family: test900; } +.w8 .fs4 { font-family: test900; } +.w9 .fs4 { font-family: test900; } + +.w1 .fs5 { font-family: test200; } +.w2 .fs5 { font-family: test200; } +.w3 .fs5 { font-family: test200; } +.w4 .fs5 { font-family: test500; } +.w5 .fs5 { font-family: test500; } +.w6 .fs5 { font-family: test500; } +.w7 .fs5 { font-family: test500; } +.w8 .fs5 { font-family: test500; } +.w9 .fs5 { font-family: test500; } + +.w1 .fs6 { font-family: test200; } +.w2 .fs6 { font-family: test200; } +.w3 .fs6 { font-family: test200; } +.w4 .fs6 { font-family: test500; } +.w5 .fs6 { font-family: test500; } +.w6 .fs6 { font-family: test500; } +.w7 .fs6 { font-family: test500; } +.w8 .fs6 { font-family: test500; } +.w9 .fs6 { font-family: test500; } + +.w1 .fs7 { font-family: test200; } +.w2 .fs7 { font-family: test200; } +.w3 .fs7 { font-family: test200; } +.w4 .fs7 { font-family: test500; } +.w5 .fs7 { font-family: test500; } +.w6 .fs7 { font-family: test500; } +.w7 .fs7 { font-family: test500; } +.w8 .fs7 { font-family: test500; } +.w9 .fs7 { font-family: test500; } + +.w1 .fs8 { font-family: test200; } +.w2 .fs8 { font-family: test200; } +.w3 .fs8 { font-family: test200; } +.w4 .fs8 { font-family: test500; } +.w5 .fs8 { font-family: test500; } +.w6 .fs8 { font-family: test500; } +.w7 .fs8 { font-family: test500; } +.w8 .fs8 { font-family: test500; } +.w9 .fs8 { font-family: test500; } + +.w1 .fs9 { font-family: test200; } +.w2 .fs9 { font-family: test200; } +.w3 .fs9 { font-family: test200; } +.w4 .fs9 { font-family: test500; } +.w5 .fs9 { font-family: test500; } +.w6 .fs9 { font-family: test500; } +.w7 .fs9 { font-family: test500; } +.w8 .fs9 { font-family: test500; } +.w9 .fs9 { font-family: test500; } + +</style> +</head> +<body> + +<p>Font family with normal width 200, 500 and condensed 100, 900</p> + +<table> +<thead> +<th></th> +<th>1</th> +<th>2</th> +<th class="red">3</th> +<th>4</th> +<th class="red">5</th> +<th>6</th> +<th>7</th> +<th>8</th> +<th>9</th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/font-matching/stretchmapping-35.html b/layout/reftests/font-matching/stretchmapping-35.html new file mode 100644 index 0000000000..a6c1245b39 --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-35.html @@ -0,0 +1,240 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +table { + border-collapse: collapse; + font-size: 28px; +} + +td { + padding: 0; margin: 0; + font-family: test; +} + +th { + font-weight: inherit; +} + +p { width: 300px; } + +.red { color: red; } + +thead { font-weight: 400; font-size: 75%; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; + font-stretch: condensed; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; + font-stretch: condensed; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +.fs1 { font-stretch: ultra-condensed; } +.fs2 { font-stretch: extra-condensed; } +.fs3 { font-stretch: condensed; } +.fs4 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs6 { font-stretch: semi-expanded; } +.fs7 { font-stretch: expanded; } +.fs8 { font-stretch: extra-expanded; } +.fs9 { font-stretch: ultra-expanded; } + +</style> +</head> +<body> + +<p>Font family with normal width 200, 500 and condensed 100, 900</p> + +<table> +<thead> +<th></th> +<th>1</th> +<th>2</th> +<th class="red">3</th> +<th>4</th> +<th class="red">5</th> +<th>6</th> +<th>7</th> +<th>8</th> +<th>9</th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="fs1"><span>あ</span></td> +<td class="fs2"><span>あ</span></td> +<td class="fs3"><span>あ</span></td> +<td class="fs4"><span>あ</span></td> +<td class="fs5"><span>あ</span></td> +<td class="fs6"><span>あ</span></td> +<td class="fs7"><span>あ</span></td> +<td class="fs8"><span>あ</span></td> +<td class="fs9"><span>あ</span></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/font-matching/stretchmapping-all-ref.html b/layout/reftests/font-matching/stretchmapping-all-ref.html new file mode 100644 index 0000000000..267e50b4ca --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-all-ref.html @@ -0,0 +1,366 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch matching tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Calibri, Verdana, sans-serif; +} + +p { margin: 0; padding: 0; } + +table { + border-collapse: collapse; +} + +th { + font-weight: normal; + background-color: #eee; +} + +th, td { width: 3em; text-align: left; } +tr th { text-align: left; } + +.fstest-full { font-family: fstest-full; } + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd2.ttf); + font-stretch: extra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd3.ttf); + font-stretch: condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd8.ttf); + font-stretch: extra-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fstest-1-3 { font-family: fstest-1-3; } + +@font-face { + font-family: fstest-1-3; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-3; + src: url(../fonts/csstest-widths-wd3.ttf); + font-stretch: condensed; +} + +.fstest-1-4 { font-family: fstest-1-4; } + +@font-face { + font-family: fstest-1-4; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-4; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +.fstest-1-5 { font-family: fstest-1-5; } + +@font-face { + font-family: fstest-1-5; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-5; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +.fstest-2-6 { font-family: fstest-2-6; } + +@font-face { + font-family: fstest-2-6; + src: url(../fonts/csstest-widths-wd2.ttf); + font-stretch: extra-condensed; +} + +@font-face { + font-family: fstest-2-6; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +.fstest-4-6 { font-family: fstest-4-6; } + +@font-face { + font-family: fstest-4-6; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-4-6; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +.fstest-4-7 { font-family: fstest-4-7; } + +@font-face { + font-family: fstest-4-7; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-4-7; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +.fstest-6-7 { font-family: fstest-6-7; } + +@font-face { + font-family: fstest-6-7; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +@font-face { + font-family: fstest-6-7; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +.fstest-7-9 { font-family: fstest-7-9; } + +@font-face { + font-family: fstest-7-9; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +@font-face { + font-family: fstest-7-9; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fstest-8-9 { font-family: fstest-8-9; } + +@font-face { + font-family: fstest-8-9; + src: url(../fonts/csstest-widths-wd8.ttf); + font-stretch: extra-expanded; +} + +@font-face { + font-family: fstest-8-9; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fs1 { font-stretch: ultra-condensed; } +.fs2 { font-stretch: extra-condensed; } +.fs3 { font-stretch: condensed; } +.fs4 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs6 { font-stretch: semi-expanded; } +.fs7 { font-stretch: expanded; } +.fs8 { font-stretch: extra-expanded; } +.fs9 { font-stretch: ultra-expanded; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p>font-stretch mapping with different font family sets</p> +<p>(only numbers should appear in the body of the table)</p> + +<table> +<thead> +<th>width</th> +<th>full</th> +<th>1-3</th> +<th>1-4</th> +<th>1-5</th> +<th>2-6</th> +<th>4-6</th> +<th>4-7</th> +<th>6-7</th> +<th>7-9</th> +<th>8-9</th> +</thead> +<tr class="fs1"> +<th>1</th> +<td class="fstest-full">1</td> +<td class="fstest-1-3">1</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs2"> +<th>2</th> +<td class="fstest-full">2</td> +<td class="fstest-1-3">1</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs3"> +<th>3</th> +<td class="fstest-full">3</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs4"> +<th>4</th> +<td class="fstest-full">4</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs5"> +<th>5</th> +<td class="fstest-full">5</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs6"> +<th>6</th> +<td class="fstest-full">6</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs7"> +<th>7</th> +<td class="fstest-full">7</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs8"> +<th>8</th> +<td class="fstest-full">8</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">9</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs9"> +<th>9</th> +<td class="fstest-full">9</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">9</td> +<td class="fstest-8-9">9</td> +</tr> +</table> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/stretchmapping-all.html b/layout/reftests/font-matching/stretchmapping-all.html new file mode 100644 index 0000000000..904fcd8f3b --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-all.html @@ -0,0 +1,505 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>font-stretch matching tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Calibri, Verdana, sans-serif; +} + +p { margin: 0; padding: 0; } + +table { + border-collapse: collapse; +} + +th { + font-weight: normal; + background-color: #eee; +} + +th, td { width: 3em; text-align: left; } +tr th { text-align: left; } + +.fstest-full { font-family: fstest-full; } + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd2.ttf); + font-stretch: extra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd3.ttf); + font-stretch: condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd8.ttf); + font-stretch: extra-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fstest-1-3 { font-family: fstest-1-3; } + +@font-face { + font-family: fstest-1-3; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-3; + src: url(../fonts/csstest-widths-wd3.ttf); + font-stretch: condensed; +} + +.fstest-1-4 { font-family: fstest-1-4; } + +@font-face { + font-family: fstest-1-4; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-4; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +.fstest-1-5 { font-family: fstest-1-5; } + +@font-face { + font-family: fstest-1-5; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-1-5; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +.fstest-2-6 { font-family: fstest-2-6; } + +@font-face { + font-family: fstest-2-6; + src: url(../fonts/csstest-widths-wd2.ttf); + font-stretch: extra-condensed; +} + +@font-face { + font-family: fstest-2-6; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +.fstest-4-6 { font-family: fstest-4-6; } + +@font-face { + font-family: fstest-4-6; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-4-6; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +.fstest-4-7 { font-family: fstest-4-7; } + +@font-face { + font-family: fstest-4-7; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-4-7; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +.fstest-6-7 { font-family: fstest-6-7; } + +@font-face { + font-family: fstest-6-7; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-expanded; +} + +@font-face { + font-family: fstest-6-7; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +.fstest-7-9 { font-family: fstest-7-9; } + +@font-face { + font-family: fstest-7-9; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: expanded; +} + +@font-face { + font-family: fstest-7-9; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fstest-8-9 { font-family: fstest-8-9; } + +@font-face { + font-family: fstest-8-9; + src: url(../fonts/csstest-widths-wd8.ttf); + font-stretch: extra-expanded; +} + +@font-face { + font-family: fstest-8-9; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-expanded; +} + +.fs1 { font-stretch: ultra-condensed; } +.fs2 { font-stretch: extra-condensed; } +.fs3 { font-stretch: condensed; } +.fs4 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs6 { font-stretch: semi-expanded; } +.fs7 { font-stretch: expanded; } +.fs8 { font-stretch: extra-expanded; } +.fs9 { font-stretch: ultra-expanded; } + +</style> + +<script type="text/javascript"> + +</script> + +</head> +<body> + +<p>font-stretch mapping with different font family sets</p> +<p>(only numbers should appear in the body of the table)</p> + +<table> +<thead> +<th>width</th> +<th>full</th> +<th>1-3</th> +<th>1-4</th> +<th>1-5</th> +<th>2-6</th> +<th>4-6</th> +<th>4-7</th> +<th>6-7</th> +<th>7-9</th> +<th>8-9</th> +</thead> +<tr class="fs1"> +<th>1</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs2"> +<th>2</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs3"> +<th>3</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs4"> +<th>4</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs5"> +<th>5</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs6"> +<th>6</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs7"> +<th>7</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs8"> +<th>8</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +<tr class="fs9"> +<th>9</th> +<td class="fstest-full">F</td> +<td class="fstest-1-3">F</td> +<td class="fstest-1-4">F</td> +<td class="fstest-1-5">F</td> +<td class="fstest-2-6">F</td> +<td class="fstest-4-6">F</td> +<td class="fstest-4-7">F</td> +<td class="fstest-6-7">F</td> +<td class="fstest-7-9">F</td> +<td class="fstest-8-9">F</td> +</tr> +</table> + +<!-- + +<p>Results based on spec logic:</p> + +<table> +<thead> +<th>width</th> +<th>full</th> +<th>1-3</th> +<th>1-4</th> +<th>1-5</th> +<th>2-6</th> +<th>4-6</th> +<th>4-7</th> +<th>6-7</th> +<th>7-9</th> +<th>8-9</th> +</thead> +<tr class="fs1"> +<th>1</th> +<td class="fstest-full">1</td> +<td class="fstest-1-3">1</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs2"> +<th>2</th> +<td class="fstest-full">2</td> +<td class="fstest-1-3">1</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs3"> +<th>3</th> +<td class="fstest-full">3</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">1</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs4"> +<th>4</th> +<td class="fstest-full">4</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">1</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs5"> +<th>5</th> +<td class="fstest-full">5</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">2</td> +<td class="fstest-4-6">4</td> +<td class="fstest-4-7">4</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs6"> +<th>6</th> +<td class="fstest-full">6</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">6</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs7"> +<th>7</th> +<td class="fstest-full">7</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">7</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs8"> +<th>8</th> +<td class="fstest-full">8</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">9</td> +<td class="fstest-8-9">8</td> +</tr> +<tr class="fs9"> +<th>9</th> +<td class="fstest-full">9</td> +<td class="fstest-1-3">3</td> +<td class="fstest-1-4">4</td> +<td class="fstest-1-5">5</td> +<td class="fstest-2-6">6</td> +<td class="fstest-4-6">6</td> +<td class="fstest-4-7">7</td> +<td class="fstest-6-7">7</td> +<td class="fstest-7-9">9</td> +<td class="fstest-8-9">9</td> +</tr> +</table> + +--> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/stretchmapping-reverse-ref.html b/layout/reftests/font-matching/stretchmapping-reverse-ref.html new file mode 100644 index 0000000000..2a8fde16cb --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-reverse-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Assure OS/2 usWidthClass isn't referenced</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +body { + margin: 50px; +} + +p.test { + font-family: fstest-full; + font-size: 24px; +} + +.fs9 { font-stretch: ultra-condensed; } +.fs8 { font-stretch: extra-condensed; } +.fs7 { font-stretch: condensed; } +.fs6 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs4 { font-stretch: semi-expanded; } +.fs3 { font-stretch: expanded; } +.fs2 { font-stretch: extra-expanded; } +.fs1 { font-stretch: ultra-expanded; } + +</style> + +</head> +<body> + +<p>The numbers below should appear in ascending sequence:</p> + +<p class="test"> +<span class="fs1">1</span> +<span class="fs2">2</span> +<span class="fs3">3</span> +<span class="fs4">4</span> +<span class="fs5">5</span> +<span class="fs6">6</span> +<span class="fs7">7</span> +<span class="fs8">8</span> +<span class="fs9">9</span> +</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/stretchmapping-reverse.html b/layout/reftests/font-matching/stretchmapping-reverse.html new file mode 100644 index 0000000000..ef3b0b1ed1 --- /dev/null +++ b/layout/reftests/font-matching/stretchmapping-reverse.html @@ -0,0 +1,102 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Assure OS/2 usWidthClass isn't referenced</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd9.ttf); + font-stretch: ultra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd8.ttf); + font-stretch: extra-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd7.ttf); + font-stretch: condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd6.ttf); + font-stretch: semi-condensed; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd5.ttf); + font-stretch: normal; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd4.ttf); + font-stretch: semi-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd3.ttf); + font-stretch: expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd2.ttf); + font-stretch: extra-expanded; +} + +@font-face { + font-family: fstest-full; + src: url(../fonts/csstest-widths-wd1.ttf); + font-stretch: ultra-expanded; +} + +body { + margin: 50px; +} + +p.test { + font-family: fstest-full; + font-size: 24px; +} + +.fs9 { font-stretch: ultra-condensed; } +.fs8 { font-stretch: extra-condensed; } +.fs7 { font-stretch: condensed; } +.fs6 { font-stretch: semi-condensed; } +.fs5 { font-stretch: normal; } +.fs4 { font-stretch: semi-expanded; } +.fs3 { font-stretch: expanded; } +.fs2 { font-stretch: extra-expanded; } +.fs1 { font-stretch: ultra-expanded; } + +</style> + +</head> +<body> + +<p>The numbers below should appear in ascending sequence:</p> + +<p class="test"> +<span class="fs1">F</span> +<span class="fs2">F</span> +<span class="fs3">F</span> +<span class="fs4">F</span> +<span class="fs5">F</span> +<span class="fs6">F</span> +<span class="fs7">F</span> +<span class="fs8">F</span> +<span class="fs9">F</span> +</p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/synthetic-bold-1-ref.html b/layout/reftests/font-matching/synthetic-bold-1-ref.html new file mode 100644 index 0000000000..9d5b28369f --- /dev/null +++ b/layout/reftests/font-matching/synthetic-bold-1-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +<style type="text/css"> +body { font-family: Symbol, OpenSymbol, "Standard Symbols L"; font-size: 2em; } +</style> +</head> +<body> +<p> abc</p> +<p> abc</p> +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-bold-1.html b/layout/reftests/font-matching/synthetic-bold-1.html new file mode 100644 index 0000000000..77588b06bb --- /dev/null +++ b/layout/reftests/font-matching/synthetic-bold-1.html @@ -0,0 +1,12 @@ +<html> +<head> +<style type="text/css"> +body { font-family: Symbol, OpenSymbol, "Standard Symbols L"; font-size: 2em; } +</style> +</head> +<!-- if synthetic bolding is working, this should NOT match the reference --> +<body> +<p> abc</p> +<p><b> abc</b></p> +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-bold-2-ref.html b/layout/reftests/font-matching/synthetic-bold-2-ref.html new file mode 100644 index 0000000000..b5a8f0d69e --- /dev/null +++ b/layout/reftests/font-matching/synthetic-bold-2-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +<style type="text/css"> +body { font-family: "Apple Chancery", Impact, "Microsoft Sans Serif", "URW Chancery L"; font-size: 2em; } +</style> +</head> +<body> +<p>Hello World</p> +<p>Hello World</p> +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-bold-2.html b/layout/reftests/font-matching/synthetic-bold-2.html new file mode 100644 index 0000000000..7da903c146 --- /dev/null +++ b/layout/reftests/font-matching/synthetic-bold-2.html @@ -0,0 +1,12 @@ +<html> +<head> +<style type="text/css"> +body { font-family: "Apple Chancery", Impact, "Microsoft Sans Serif", "URW Chancery L"; font-size: 2em; } +</style> +</head> +<!-- if synthetic bolding is working, this should NOT match the reference --> +<body> +<p>Hello World</p> +<p><b>Hello World</b></p> +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-style-1-notref.html b/layout/reftests/font-matching/synthetic-style-1-notref.html new file mode 100644 index 0000000000..0cc51da48f --- /dev/null +++ b/layout/reftests/font-matching/synthetic-style-1-notref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Synthetic italic should not use true italic face</title> +<!-- see bug 724231 --> +<style type="text/css"> +body { + font-family: "Times New Roman", "Times", "DejaVu Serif", "FreeSerif", "Droid Serif", sans-serif; +} +</style> +</head> +<body> +<p><i>Synthetic italics</i> should <i>not</i> use the true italic face. +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-style-1.html b/layout/reftests/font-matching/synthetic-style-1.html new file mode 100644 index 0000000000..4db379273c --- /dev/null +++ b/layout/reftests/font-matching/synthetic-style-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Synthetic italic should not use true italic face</title> +<!-- see bug 724231 --> +<style type="text/css"> +@font-face { + font-family: test; + src: local(Times New Roman), local(Times), local(DejaVu Serif), local(FreeSerif), local(Droid Serif); +} +body { + font-family: test, sans-serif; +} +</style> +</head> +<body> +<p><i>Synthetic italics</i> should <i>not</i> use the true italic face. +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-style-2-notref.html b/layout/reftests/font-matching/synthetic-style-2-notref.html new file mode 100644 index 0000000000..e3fa7fb6af --- /dev/null +++ b/layout/reftests/font-matching/synthetic-style-2-notref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Synthetic bold should not use true bold face</title> +<!-- see bug 724231 --> +<style type="text/css"> +body { + font-family: "Times New Roman", "Times", "DejaVu Serif", "FreeSerif", "Droid Serif", sans-serif; +} +</style> +</head> +<body> +<p><b>Synthetic bold</b> should <b>not</b> use the true bold face. +</body> +</html> diff --git a/layout/reftests/font-matching/synthetic-style-2.html b/layout/reftests/font-matching/synthetic-style-2.html new file mode 100644 index 0000000000..3885119112 --- /dev/null +++ b/layout/reftests/font-matching/synthetic-style-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Synthetic bold should not use true bold face</title> +<!-- see bug 724231 --> +<style type="text/css"> +@font-face { + font-family: test; + src: local(Times New Roman), local(Times), local(DejaVu Serif), local(FreeSerif), local(Droid Serif); +} +body { + font-family: test, sans-serif; +} +</style> +</head> +<body> +<p><b>Synthetic bold</b> should <b>not</b> use the true bold face. +</body> +</html> diff --git a/layout/reftests/font-matching/syntheticbold-rotated-ref.html b/layout/reftests/font-matching/syntheticbold-rotated-ref.html new file mode 100644 index 0000000000..2065e31583 --- /dev/null +++ b/layout/reftests/font-matching/syntheticbold-rotated-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>rotated synthetic bold</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +@font-face { + font-family: libertine; + src: url(../fonts/LinLibertine_Re-4.7.5.woff); +} + +body { + margin: 150px 0px; + font-size: 800%; +} + +p { margin: 0; } + +.test { + font-family: libertine; + display: inline-block; + transform: rotate(90deg); +} + +</style> + +</head> +<body> + +<p><span class="test">uh oh!</span></p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/syntheticbold-rotated.html b/layout/reftests/font-matching/syntheticbold-rotated.html new file mode 100644 index 0000000000..bb856c0c36 --- /dev/null +++ b/layout/reftests/font-matching/syntheticbold-rotated.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>rotated synthetic bold</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +@font-face { + font-family: libertine; + src: url(../fonts/LinLibertine_Re-4.7.5.woff); +} + +body { + margin: 150px 0px; + font-size: 800%; +} + +p { margin: 0; } + +.test { + font-family: libertine; + display: inline-block; + transform: rotate(90deg); + font-weight: bold; +} + +</style> + +</head> +<body> + +<p><span class="test">uh oh!</span></p> + +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/font-matching/system-font-pref.html b/layout/reftests/font-matching/system-font-pref.html new file mode 100644 index 0000000000..97411bb8f9 --- /dev/null +++ b/layout/reftests/font-matching/system-font-pref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="font: menu">Hey diff --git a/layout/reftests/font-matching/system-generic-fallback-1-ref.html b/layout/reftests/font-matching/system-generic-fallback-1-ref.html new file mode 100644 index 0000000000..84deb813a1 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div lang="en" id=test> +<p></p> +<p></p> +<p></p> +<p></p> +<p></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-1.html b/layout/reftests/font-matching/system-generic-fallback-1.html new file mode 100644 index 0000000000..d06d5259cb --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-1.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p></p> +<p lang="ru"></p> +<p lang="el"></p> +<p lang="he"></p> +<p lang="ar"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-2-ref.html b/layout/reftests/font-matching/system-generic-fallback-2-ref.html new file mode 100644 index 0000000000..efe6f93739 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-2-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-tw"></p> +<p lang="zh-tw"></p> +<p lang="zh-tw"></p> +<p lang="zh-tw"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-2.html b/layout/reftests/font-matching/system-generic-fallback-2.html new file mode 100644 index 0000000000..2e1b02655c --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-2.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-tw"></p> +<p lang="zh-TW"></p> +<p lang="zh_tw"></p> +<p lang="zh_TW"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-3-ref.html b/layout/reftests/font-matching/system-generic-fallback-3-ref.html new file mode 100644 index 0000000000..0ddd8c5d94 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-3-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-cn"></p> +<p lang="zh-cn"></p> +<p lang="zh-cn"></p> +<p lang="zh-cn"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-3.html b/layout/reftests/font-matching/system-generic-fallback-3.html new file mode 100644 index 0000000000..a704d234c4 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-3.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-cn"></p> +<p lang="zh-CN"></p> +<p lang="zh_cn"></p> +<p lang="zh_CN"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-4-ref.html b/layout/reftests/font-matching/system-generic-fallback-4-ref.html new file mode 100644 index 0000000000..5961caaf53 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-4-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-hk"></p> +<p lang="zh-hk"></p> +<p lang="zh-hk"></p> +<p lang="zh-hk"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-4.html b/layout/reftests/font-matching/system-generic-fallback-4.html new file mode 100644 index 0000000000..d7ffee3e97 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-4.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + width: 200px; + font-size: 32px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +#test { width: 500px } +</style> + +</head> +<body> + +<div id=test> +<p lang="zh-hk"></p> +<p lang="zh-HK"></p> +<p lang="zh_hk"></p> +<p lang="zh_HK"></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-ja.html b/layout/reftests/font-matching/system-generic-fallback-ja.html new file mode 100644 index 0000000000..844200111f --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-ja.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + font-size: 80px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +</style> + +</head> +<body> + +<div lang="ja" id=test> +<p></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-ko.html b/layout/reftests/font-matching/system-generic-fallback-ko.html new file mode 100644 index 0000000000..526ab817d8 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-ko.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + font-size: 80px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +</style> + +</head> +<body> + +<div lang="ko" id=test> +<p></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-zh-cn.html b/layout/reftests/font-matching/system-generic-fallback-zh-cn.html new file mode 100644 index 0000000000..afcabb396c --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-zh-cn.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + font-size: 80px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +</style> + +</head> +<body> + +<div lang="zh-cn" id=test> +<p></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-generic-fallback-zh-tw.html b/layout/reftests/font-matching/system-generic-fallback-zh-tw.html new file mode 100644 index 0000000000..64cc1aded5 --- /dev/null +++ b/layout/reftests/font-matching/system-generic-fallback-zh-tw.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>system generic linked families</title> +<meta charset="utf-8"> + +<style> +body { + margin: 50px; +} + +p { + margin: 0; + display: inline-block; + font-size: 80px; + line-height: 1.3em; +} + +p + p { margin-top: 5px; } + +#test p:before { content: "123abc 途外"; } +#test p { font-family: -apple-system; } +</style> + +</head> +<body> + +<div lang="zh-tw" id=test> +<p></p> +</div> + +</body> +</html> diff --git a/layout/reftests/font-matching/system-ui-fallback-2-ref.html b/layout/reftests/font-matching/system-ui-fallback-2-ref.html new file mode 100644 index 0000000000..6e60fefe18 --- /dev/null +++ b/layout/reftests/font-matching/system-ui-fallback-2-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<h1 style="font-family: system-ui">ب</h1> diff --git a/layout/reftests/font-matching/system-ui-fallback-2.html b/layout/reftests/font-matching/system-ui-fallback-2.html new file mode 100644 index 0000000000..a39c4e2a2d --- /dev/null +++ b/layout/reftests/font-matching/system-ui-fallback-2.html @@ -0,0 +1,2 @@ +<!doctype html> +<h1 style="font-family: nonexistent, system-ui">ب</h1> diff --git a/layout/reftests/font-matching/system-ui-fallback-notref.html b/layout/reftests/font-matching/system-ui-fallback-notref.html new file mode 100644 index 0000000000..6484bd2e6d --- /dev/null +++ b/layout/reftests/font-matching/system-ui-fallback-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="font:36px system-ui, sans-serif">你好</div> diff --git a/layout/reftests/font-matching/system-ui-fallback.html b/layout/reftests/font-matching/system-ui-fallback.html new file mode 100644 index 0000000000..1710dc1405 --- /dev/null +++ b/layout/reftests/font-matching/system-ui-fallback.html @@ -0,0 +1,9 @@ +<!doctype html> +<!-- + NOTE(emilio): The rendering _could_ be the same if the system-ui font + supported the glyphs, but we rely on it not doing so for now. + + When we implement proper multi-lingual font support (at least on macOS), this + is expected to render the same +--> +<div style="font:36px system-ui, serif">你好</div> diff --git a/layout/reftests/font-matching/weightmapping-12-ref.html b/layout/reftests/font-matching/weightmapping-12-ref.html new file mode 100644 index 0000000000..f985dac4f6 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-12-ref.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test100; } +.w1 .cli { font-family: test100; } +.w1 .cnor { font-family: test100; } +.w1 .cbo { font-family: test200; } +.w1 .cbobo { font-family: test200; font-weight: bold; } + +.w2 .clili { font-family: test100; } +.w2 .cli { font-family: test100; } +.w2 .cnor { font-family: test200; } +.w2 .cbo { font-family: test200; } +.w2 .cbobo { font-family: test200; font-weight: bold; } + +.w3 .clili { font-family: test100; } +.w3 .cli { font-family: test100; } +.w3 .cnor { font-family: test200; } +.w3 .cbo { font-family: test200; } +.w3 .cbobo { font-family: test200; font-weight: bold; } + +.w4 .clili { font-family: test100; } +.w4 .cli { font-family: test100; } +.w4 .cnor { font-family: test200; } +.w4 .cbo { font-family: test200; font-weight: bold; } +.w4 .cbobo { font-family: test200; font-weight: bold; } + +.w5 .clili { font-family: test100; } +.w5 .cli { font-family: test100; } +.w5 .cnor { font-family: test200; } +.w5 .cbo { font-family: test200; font-weight: bold; } +.w5 .cbobo { font-family: test200; font-weight: bold; } + +.w6 .clili { font-family: test100; } +.w6 .cli { font-family: test200; } +.w6 .cnor { font-family: test200; font-weight: bold; } +.w6 .cbo { font-family: test200; font-weight: bold; } +.w6 .cbobo { font-family: test200; font-weight: bold; } + +.w7 .clili { font-family: test100; } +.w7 .cli { font-family: test200; } +.w7 .cnor { font-family: test200; font-weight: bold; } +.w7 .cbo { font-family: test200; font-weight: bold; } +.w7 .cbobo { font-family: test200; font-weight: bold; } + +.w8 .clili { font-family: test200; } +.w8 .cli { font-family: test200; font-weight: bold; } +.w8 .cnor { font-family: test200; font-weight: bold; } +.w8 .cbo { font-family: test200; font-weight: bold; } +.w8 .cbobo { font-family: test200; font-weight: bold; } + +.w9 .clili { font-family: test200; } +.w9 .cli { font-family: test200; font-weight: bold; } +.w9 .cnor { font-family: test200; font-weight: bold; } +.w9 .cbo { font-family: test200; font-weight: bold; } +.w9 .cbobo { font-family: test200; font-weight: bold; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 100, 200 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th class="red">100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-12.html b/layout/reftests/font-matching/weightmapping-12.html new file mode 100644 index 0000000000..d64a716f21 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-12.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 100, 200 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th class="red">100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-12579-ref.html b/layout/reftests/font-matching/weightmapping-12579-ref.html new file mode 100644 index 0000000000..a7b27d312a --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-12579-ref.html @@ -0,0 +1,255 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test100; } +.w1 .cli { font-family: test100; } +.w1 .cnor { font-family: test100; } +.w1 .cbo { font-family: test500; } +.w1 .cbobo { font-family: test700; } + +.w2 .clili { font-family: test100; } +.w2 .cli { font-family: test100; } +.w2 .cnor { font-family: test200; } +.w2 .cbo { font-family: test500; } +.w2 .cbobo { font-family: test700; } + +.w3 .clili { font-family: test100; } +.w3 .cli { font-family: test100; } +.w3 .cnor { font-family: test200; } +.w3 .cbo { font-family: test500; } +.w3 .cbobo { font-family: test700; } + +.w4 .clili { font-family: test100; } +.w4 .cli { font-family: test100; } +.w4 .cnor { font-family: test500; } +.w4 .cbo { font-family: test700; } +.w4 .cbobo { font-family: test900; } + +.w5 .clili { font-family: test100; } +.w5 .cli { font-family: test100; } +.w5 .cnor { font-family: test500; } +.w5 .cbo { font-family: test700; } +.w5 .cbobo { font-family: test900; } + +.w6 .clili { font-family: test100; } +.w6 .cli { font-family: test500; } +.w6 .cnor { font-family: test700; } +.w6 .cbo { font-family: test900; } +.w6 .cbobo { font-family: test900; } + +.w7 .clili { font-family: test100; } +.w7 .cli { font-family: test500; } +.w7 .cnor { font-family: test700; } +.w7 .cbo { font-family: test900; } +.w7 .cbobo { font-family: test900; } + +.w8 .clili { font-family: test500; } +.w8 .cli { font-family: test700; } +.w8 .cnor { font-family: test900; } +.w8 .cbo { font-family: test900; } +.w8 .cbobo { font-family: test900; } + +.w9 .clili { font-family: test500; } +.w9 .cli { font-family: test700; } +.w9 .cnor { font-family: test900; } +.w9 .cbo { font-family: test900; } +.w9 .cbobo { font-family: test900; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 100, 200, 500, 700, 900 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th class="red">100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th class="red">900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-12579.html b/layout/reftests/font-matching/weightmapping-12579.html new file mode 100644 index 0000000000..bdce065ecf --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-12579.html @@ -0,0 +1,207 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-thin.ttf); + font-weight: 100; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-black.ttf); + font-weight: 900; +} + +@font-face { + font-family: test100; + src: url(../fonts/mplus/mplus-1p-thin.ttf); +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +@font-face { + font-family: test900; + src: url(../fonts/mplus/mplus-1p-black.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 100, 200, 500, 700, 900 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th class="red">100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th class="red">900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-25-ref.html b/layout/reftests/font-matching/weightmapping-25-ref.html new file mode 100644 index 0000000000..8f216c27f3 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-25-ref.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test200; } +.w1 .cli { font-family: test200; } +.w1 .cnor { font-family: test200; } +.w1 .cbo { font-family: test500; } +.w1 .cbobo { font-family: test500; font-weight: bold; } + +.w2 .clili { font-family: test200; } +.w2 .cli { font-family: test200; } +.w2 .cnor { font-family: test200; } +.w2 .cbo { font-family: test500; } +.w2 .cbobo { font-family: test500; font-weight: bold; } + +.w3 .clili { font-family: test200; } +.w3 .cli { font-family: test200; } +.w3 .cnor { font-family: test200; } +.w3 .cbo { font-family: test500; } +.w3 .cbobo { font-family: test500; font-weight: bold; } + +.w4 .clili { font-family: test200; } +.w4 .cli { font-family: test200; } +.w4 .cnor { font-family: test500; } +.w4 .cbo { font-family: test500; font-weight: bold; } +.w4 .cbobo { font-family: test500; font-weight: bold; } + +.w5 .clili { font-family: test200; } +.w5 .cli { font-family: test200; } +.w5 .cnor { font-family: test500; } +.w5 .cbo { font-family: test500; font-weight: bold; } +.w5 .cbobo { font-family: test500; font-weight: bold; } + +.w6 .clili { font-family: test200; } +.w6 .cli { font-family: test500; } +.w6 .cnor { font-family: test500; font-weight: bold; } +.w6 .cbo { font-family: test500; font-weight: bold; } +.w6 .cbobo { font-family: test500; font-weight: bold; } + +.w7 .clili { font-family: test200; } +.w7 .cli { font-family: test500; } +.w7 .cnor { font-family: test500; font-weight: bold; } +.w7 .cbo { font-family: test500; font-weight: bold; } +.w7 .cbobo { font-family: test500; font-weight: bold; } + +.w8 .clili { font-family: test500; } +.w8 .cli { font-family: test500; font-weight: bold; } +.w8 .cnor { font-family: test500; font-weight: bold; } +.w8 .cbo { font-family: test500; font-weight: bold; } +.w8 .cbobo { font-family: test500; font-weight: bold; } + +.w9 .clili { font-family: test500; } +.w9 .cli { font-family: test500; font-weight: bold; } +.w9 .cnor { font-family: test500; font-weight: bold; } +.w9 .cbo { font-family: test500; font-weight: bold; } +.w9 .cbobo { font-family: test500; font-weight: bold; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 200, 500 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-25.html b/layout/reftests/font-matching/weightmapping-25.html new file mode 100644 index 0000000000..360d875ad5 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-25.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-light.ttf); + font-weight: 200; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test200; + src: url(../fonts/mplus/mplus-1p-light.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 200, 500 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th class="red">200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-45-ref.html b/layout/reftests/font-matching/weightmapping-45-ref.html new file mode 100644 index 0000000000..4115999093 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-45-ref.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test400; } +.w1 .cli { font-family: test400; } +.w1 .cnor { font-family: test400; } +.w1 .cbo { font-family: test400; } +.w1 .cbobo { font-family: test500; font-weight: bold; } + +.w2 .clili { font-family: test400; } +.w2 .cli { font-family: test400; } +.w2 .cnor { font-family: test400; } +.w2 .cbo { font-family: test400; } +.w2 .cbobo { font-family: test500; font-weight: bold; } + +.w3 .clili { font-family: test400; } +.w3 .cli { font-family: test400; } +.w3 .cnor { font-family: test400; } +.w3 .cbo { font-family: test400; } +.w3 .cbobo { font-family: test500; font-weight: bold; } + +.w4 .clili { font-family: test400; } +.w4 .cli { font-family: test400; } +.w4 .cnor { font-family: test400; } +.w4 .cbo { font-family: test500; font-weight: bold; } +.w4 .cbobo { font-family: test500; font-weight: bold; } + +.w5 .clili { font-family: test400; } +.w5 .cli { font-family: test400; } +.w5 .cnor { font-family: test500; } +.w5 .cbo { font-family: test500; font-weight: bold; } +.w5 .cbobo { font-family: test500; font-weight: bold; } + +.w6 .clili { font-family: test400; } +.w6 .cli { font-family: test400; } +.w6 .cnor { font-family: test500; font-weight: bold; } +.w6 .cbo { font-family: test500; font-weight: bold; } +.w6 .cbobo { font-family: test500; font-weight: bold; } + +.w7 .clili { font-family: test400; } +.w7 .cli { font-family: test400; } +.w7 .cnor { font-family: test500; font-weight: bold; } +.w7 .cbo { font-family: test500; font-weight: bold; } +.w7 .cbobo { font-family: test500; font-weight: bold; } + +.w8 .clili { font-family: test400; } +.w8 .cli { font-family: test500; font-weight: bold; } +.w8 .cnor { font-family: test500; font-weight: bold; } +.w8 .cbo { font-family: test500; font-weight: bold; } +.w8 .cbobo { font-family: test500; font-weight: bold; } + +.w9 .clili { font-family: test400; } +.w9 .cli { font-family: test500; font-weight: bold; } +.w9 .cnor { font-family: test500; font-weight: bold; } +.w9 .cbo { font-family: test500; font-weight: bold; } +.w9 .cbobo { font-family: test500; font-weight: bold; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 500 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-45.html b/layout/reftests/font-matching/weightmapping-45.html new file mode 100644 index 0000000000..49647aea01 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-45.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 500 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-458-ref.html b/layout/reftests/font-matching/weightmapping-458-ref.html new file mode 100644 index 0000000000..56cf4d7432 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-458-ref.html @@ -0,0 +1,233 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test400; } +.w1 .cli { font-family: test400; } +.w1 .cnor { font-family: test400; } +.w1 .cbo { font-family: test400; } +.w1 .cbobo { font-family: test800; } + +.w2 .clili { font-family: test400; } +.w2 .cli { font-family: test400; } +.w2 .cnor { font-family: test400; } +.w2 .cbo { font-family: test400; } +.w2 .cbobo { font-family: test800; } + +.w3 .clili { font-family: test400; } +.w3 .cli { font-family: test400; } +.w3 .cnor { font-family: test400; } +.w3 .cbo { font-family: test400; } +.w3 .cbobo { font-family: test800; } + +.w4 .clili { font-family: test400; } +.w4 .cli { font-family: test400; } +.w4 .cnor { font-family: test400; } +.w4 .cbo { font-family: test800; } +.w4 .cbobo { font-family: test800; } + +.w5 .clili { font-family: test400; } +.w5 .cli { font-family: test400; } +.w5 .cnor { font-family: test500; } +.w5 .cbo { font-family: test800; } +.w5 .cbobo { font-family: test800; } + +.w6 .clili { font-family: test400; } +.w6 .cli { font-family: test400; } +.w6 .cnor { font-family: test800; } +.w6 .cbo { font-family: test800; } +.w6 .cbobo { font-family: test800; } + +.w7 .clili { font-family: test400; } +.w7 .cli { font-family: test400; } +.w7 .cnor { font-family: test800; } +.w7 .cbo { font-family: test800; } +.w7 .cbobo { font-family: test800; } + +.w8 .clili { font-family: test400; } +.w8 .cli { font-family: test800; } +.w8 .cnor { font-family: test800; } +.w8 .cbo { font-family: test800; } +.w8 .cbobo { font-family: test800; } + +.w9 .clili { font-family: test400; } +.w9 .cli { font-family: test800; } +.w9 .cnor { font-family: test800; } +.w9 .cbo { font-family: test800; } +.w9 .cbobo { font-family: test800; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 500, 800 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th class="red">800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-458.html b/layout/reftests/font-matching/weightmapping-458.html new file mode 100644 index 0000000000..4c4461ab03 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-458.html @@ -0,0 +1,185 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test500; + src: url(../fonts/mplus/mplus-1p-medium.ttf); +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 500, 800 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th class="red">500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th>700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th class="red">800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-478-ref.html b/layout/reftests/font-matching/weightmapping-478-ref.html new file mode 100644 index 0000000000..a170d3a35b --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-478-ref.html @@ -0,0 +1,233 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test400; } +.w1 .cli { font-family: test400; } +.w1 .cnor { font-family: test400; } +.w1 .cbo { font-family: test400; } +.w1 .cbobo { font-family: test700; } + +.w2 .clili { font-family: test400; } +.w2 .cli { font-family: test400; } +.w2 .cnor { font-family: test400; } +.w2 .cbo { font-family: test400; } +.w2 .cbobo { font-family: test700; } + +.w3 .clili { font-family: test400; } +.w3 .cli { font-family: test400; } +.w3 .cnor { font-family: test400; } +.w3 .cbo { font-family: test400; } +.w3 .cbobo { font-family: test700; } + +.w4 .clili { font-family: test400; } +.w4 .cli { font-family: test400; } +.w4 .cnor { font-family: test400; } +.w4 .cbo { font-family: test700; } +.w4 .cbobo { font-family: test800; } + +.w5 .clili { font-family: test400; } +.w5 .cli { font-family: test400; } +.w5 .cnor { font-family: test400; } +.w5 .cbo { font-family: test700; } +.w5 .cbobo { font-family: test800; } + +.w6 .clili { font-family: test400; } +.w6 .cli { font-family: test400; } +.w6 .cnor { font-family: test700; } +.w6 .cbo { font-family: test800; } +.w6 .cbobo { font-family: test800; } + +.w7 .clili { font-family: test400; } +.w7 .cli { font-family: test400; } +.w7 .cnor { font-family: test700; } +.w7 .cbo { font-family: test800; } +.w7 .cbobo { font-family: test800; } + +.w8 .clili { font-family: test400; } +.w8 .cli { font-family: test700; } +.w8 .cnor { font-family: test800; } +.w8 .cbo { font-family: test800; } +.w8 .cbobo { font-family: test800; } + +.w9 .clili { font-family: test400; } +.w9 .cli { font-family: test700; } +.w9 .cnor { font-family: test800; } +.w9 .cbo { font-family: test800; } +.w9 .cbobo { font-family: test800; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 700, 800 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th class="red">800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-478.html b/layout/reftests/font-matching/weightmapping-478.html new file mode 100644 index 0000000000..9c61689c45 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-478.html @@ -0,0 +1,185 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-regular.ttf); + font-weight: normal; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); + font-weight: 800; +} + +@font-face { + font-family: test400; + src: url(../fonts/mplus/mplus-1p-regular.ttf); +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +@font-face { + font-family: test800; + src: url(../fonts/mplus/mplus-1p-heavy.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 400, 700, 800 weights</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th class="red">400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th class="red">800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-7-ref.html b/layout/reftests/font-matching/weightmapping-7-ref.html new file mode 100644 index 0000000000..53888decd0 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-7-ref.html @@ -0,0 +1,211 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 .clili { font-family: test700; } +.w1 .cli { font-family: test700; } +.w1 .cnor { font-family: test700; } +.w1 .cbo { font-family: test700; } +.w1 .cbobo { font-family: test700; } + +.w2 .clili { font-family: test700; } +.w2 .cli { font-family: test700; } +.w2 .cnor { font-family: test700; } +.w2 .cbo { font-family: test700; } +.w2 .cbobo { font-family: test700; } + +.w3 .clili { font-family: test700; } +.w3 .cli { font-family: test700; } +.w3 .cnor { font-family: test700; } +.w3 .cbo { font-family: test700; } +.w3 .cbobo { font-family: test700; } + +.w4 .clili { font-family: test700; } +.w4 .cli { font-family: test700; } +.w4 .cnor { font-family: test700; } +.w4 .cbo { font-family: test700; } +.w4 .cbobo { font-family: test700; } + +.w5 .clili { font-family: test700; } +.w5 .cli { font-family: test700; } +.w5 .cnor { font-family: test700; } +.w5 .cbo { font-family: test700; } +.w5 .cbobo { font-family: test700; } + +.w6 .clili { font-family: test700; } +.w6 .cli { font-family: test700; } +.w6 .cnor { font-family: test700; } +.w6 .cbo { font-family: test700; } +.w6 .cbobo { font-family: test700; } + +.w7 .clili { font-family: test700; } +.w7 .cli { font-family: test700; } +.w7 .cnor { font-family: test700; } +.w7 .cbo { font-family: test700; } +.w7 .cbobo { font-family: test700; } + +.w8 .clili { font-family: test700; } +.w8 .cli { font-family: test700; } +.w8 .cnor { font-family: test700; } +.w8 .cbo { font-family: test700; } +.w8 .cbobo { font-family: test700; } + +.w9 .clili { font-family: test700; } +.w9 .cli { font-family: test700; } +.w9 .cnor { font-family: test700; } +.w9 .cbo { font-family: test700; } +.w9 .cbobo { font-family: test700; } + +.w1 th { font-weight: 100; } +.w2 th { font-weight: 200; } +.w3 th { font-weight: 300; } +.w4 th { font-weight: 400; } +.w5 th { font-weight: 500; } +.w6 th { font-weight: 600; } +.w7 th { font-weight: 700; } +.w8 th { font-weight: 800; } +.w9 th { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 700 weight</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/weightmapping-7.html b/layout/reftests/font-matching/weightmapping-7.html new file mode 100644 index 0000000000..6b2ad74ee7 --- /dev/null +++ b/layout/reftests/font-matching/weightmapping-7.html @@ -0,0 +1,163 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Weight mapping tests</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + +<style type="text/css"> + +body { + margin: 50px; + font-family: Futura, Verdana, sans-serif; +} + +h3, h4 { font-weight: normal; } + +/* make all the spans blocks to avoid influence of what's outside them + on line-height calculations */ +span { display: block; } + +@font-face { + font-family: test; + src: url(../fonts/mplus/mplus-1p-bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: test700; + src: url(../fonts/mplus/mplus-1p-bold.ttf); +} + +table { + border-collapse: collapse; + font-family: test; + font-size: 20px; +} + +td { + padding: 0; margin: 0; +} + +th { + font-weight: inherit; +} + +.red { color: red; } + +th.cnor { font-weight: inherit; } +th.cbo { font-weight: bolder; } +th.cbobo, th.cbobo span { font-weight: bolder; } +th.cli { font-weight: lighter; } +th.clili, th.clili span { font-weight: lighter; } + +td.cnor { font-weight: inherit; } +td.cbo { font-weight: bolder; } +td.cbobo, td.cbobo span { font-weight: bolder; } +td.cli { font-weight: lighter; } +td.clili, td.clili span { font-weight: lighter; } + +thead { font-weight: 400; font-size: 75%; } + +.w1 { font-weight: 100; } +.w2 { font-weight: 200; } +.w3 { font-weight: 300; } +.w4 { font-weight: 400; } +.w5 { font-weight: 500; } +.w6 { font-weight: 600; } +.w7 { font-weight: 700; } +.w8 { font-weight: 800; } +.w9 { font-weight: 900; } + +</style> +</head> +<body> + +<h3>Font family with 700 weight</h3> + +<table> +<thead> +<th></th> +<th class="clili"><span>lighter lighter</span></th> +<th class="cli"><span>lighter</span></th> +<th class="cnor"><span>normal</span></th> +<th class="cbo"><span>bolder</span></th> +<th class="cbobo"><span>bolder bolder</span></th> +</thead> +<tr class="w1"> +<th>100</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w2"> +<th>200</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w3"> +<th>300</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w4"> +<th>400</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w5"> +<th>500</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w6"> +<th>600</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w7"> +<th class="red">700</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w8"> +<th>800</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +<tr class="w9"> +<th>900</th> +<td class="clili"><span>東京特許許可局</span></td> +<td class="cli"><span>東京特許許可局</span></td> +<td class="cnor"><span>東京特許許可局</span></td> +<td class="cbo"><span>東京特許許可局</span></td> +<td class="cbobo"><span>東京特許許可局</span></td> +</tr> +</table> + +<p>tokyotokkyokyokakyoku</p> + +</body> +</html> diff --git a/layout/reftests/font-matching/wingdings-1-notref.html b/layout/reftests/font-matching/wingdings-1-notref.html new file mode 100644 index 0000000000..83acbacd0e --- /dev/null +++ b/layout/reftests/font-matching/wingdings-1-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +body { + font: 16px/2 sans-serif; +} +</style> +<body> +Trying the Wingdings font: <span>abcdef 12345</span> diff --git a/layout/reftests/font-matching/wingdings-1-ref.html b/layout/reftests/font-matching/wingdings-1-ref.html new file mode 100644 index 0000000000..898559baa3 --- /dev/null +++ b/layout/reftests/font-matching/wingdings-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +body { + font: 16px/2 sans-serif; +} +span { + font-family: Wingdings, sans-serif; +} +</style> +<body> +Trying the Wingdings font: +<span></span> diff --git a/layout/reftests/font-matching/wingdings-1.html b/layout/reftests/font-matching/wingdings-1.html new file mode 100644 index 0000000000..f3dd3e68bd --- /dev/null +++ b/layout/reftests/font-matching/wingdings-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +body { + font: 16px/2 sans-serif; +} +span { + font-family: Wingdings, sans-serif; +} +</style> +<body> +Trying the Wingdings font: <span>abcdef 12345</span> |