diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-text/hanging-punctuation | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/hanging-punctuation')
16 files changed, 1051 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht new file mode 100644 index 0000000000..a0b0fed058 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - allow-end - basic cases</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" /> + <link rel="match" href="reference/hanging-punctuation-allow-end-001-ref.xht"/> + <meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." /> + <style type="text/css"> + <![CDATA[ + .test { + hanging-punctuation: allow-end; + } + /* the CSS below is not part of the test */ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="test"> + これらは満たす文字で、それらも満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="test"> + これは満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これは満たす文字です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="test"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="test"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html new file mode 100644 index 0000000000..ff2b61dd81 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text Test: allowed ending hanging-punctuation does not affect block box boundary</title> + + <!-- + + Issue 4222: [css-text-3] hanging-punctuation effect on inline/block bounds + https://github.com/w3c/csswg-drafts/issues/4222 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging"> + <link rel="match" href="reference/hanging-punctuation-block-bound-001-ref.html"> + + <meta content="This test checks that hanging punctuations has no effect on the boundary of a block box. The background of a block box does not include hanging punctuations." name="assert"> + + <style> + div + { + background-color: lime; + border: black solid 3px; + font-family: monospace; + font-size: 60px; + line-height: 1.5em; /* computes to 90px */ + hanging-punctuation: allow-end; + width: 240px; + } + </style> + + <body lang="ja"> + + <div>まだよくています。しかし特</div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht new file mode 100644 index 0000000000..1dd5f2ef97 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht @@ -0,0 +1,108 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - first - basic cases</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" /> + <link rel="match" href="reference/hanging-punctuation-first-001-ref.xht"/> + <meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." /> + <style type="text/css"> + <![CDATA[ + .test { + hanging-punctuation: first; + } + /* the CSS below is not part of the test */ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .hanging { + left: -1em; + position: relative; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + Opening brackets + </div> + <div class="parent"> + <div class="test"> + 「これは、満たすための文字です。」 + </div> + <br /> + <div class="no-wrap"> + <span class="hanging">「これは、満たすための</span><br />文字です。」 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Closing brackets + </div> + <div class="parent"> + <div class="test"> + これは、「満たす文字」です。 + </div> + <br /> + <div class="no-wrap"> + これは、「満たす文<br />字」です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Initial quotes + </div> + <div class="parent"> + <div class="test"> + “これは、満たすための文字です。” + </div> + <br /> + <div class="no-wrap"> + <span class="hanging">“これは、満たすための</span><br />文字です。” + </div> + </div> + </div> + <div class="wrapper"> + <div> + Final quotes + </div> + <div class="parent"> + <div class="test"> + これは、“満たす文字”です。 + </div> + <br /> + <div class="no-wrap"> + これは、“満たす文<br />字”です。 + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht new file mode 100644 index 0000000000..a39b5f81de --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - force-end - basic cases</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" /> + <link rel="match" href="reference/hanging-punctuation-force-end-001-ref.xht"/> + <meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." /> + <style type="text/css"> + <![CDATA[ + .test { + hanging-punctuation: force-end; + } + /* the CSS below is not part of the test */ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="test"> + これらは満たす文字で、それらも満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="test"> + これは満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これは満たす文字です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="test"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="test"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html new file mode 100644 index 0000000000..9be9947fe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang=en> + +<title>CSS Test: hanging-punctuation - force-end - basic cases</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation"> +<link rel="match" href="reference/hanging-punctuation-inline-001-ref.html"> +<meta name="assert" content="hanging punctuation applies to inlines"> +<style> +div { font-size: 2em; } +#ref { color: blue; } +#test { + width: 4em; + color: orange; +} +#test span { + hanging-punctuation: last; +} +</style> + +<p>Test passes if the orange and blue pieces of text are laid out identically. + +<div id=ref>字字字字」</div> +<div id=test>字字字字<span>」</span></div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html new file mode 100644 index 0000000000..c29d475869 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text Test: allowed ending hanging-punctuation affect inline box boundary</title> + + <!-- + + Issue 4222: [css-text-3] hanging-punctuation effect on inline/block bounds + https://github.com/w3c/csswg-drafts/issues/4222 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging"> + <link rel="match" href="reference/hanging-punctuation-inline-bound-001-ref.html"> + + <meta content="This test checks that background of inline boxes includes hanging punctuations and text-selecting (or highlighting) inline boxes will include hanging punctuations." name="assert"> + + <style> + div + { + font-family: monospace; + font-size: 60px; + line-height: 1.5em; /* computes to 90px */ + hanging-punctuation: allow-end; + width: 245px; + } + + span + { + background-color: lime; + border: black solid 3px; + } + </style> + + <body lang="ja"> + + <div><span>まだよくています。しかし特</span></div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht new file mode 100644 index 0000000000..dec923a87e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - last - basic cases</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" /> + <link rel="match" href="reference/hanging-punctuation-last-001-ref.xht"/> + <meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." /> + <style type="text/css"> + <![CDATA[ + .test { + hanging-punctuation: last; + } + /* the CSS below is not part of the test */ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + Opening brackets + </div> + <div class="parent"> + <div class="test"> + 「これは、満たすための文字です。」 + </div> + <br /> + <div class="no-wrap"> + 「これは、満たすため<br />の文字です。」 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Closing brackets + </div> + <div class="parent"> + <div class="test"> + これは、「満たす文字」です。 + </div> + <br /> + <div class="no-wrap"> + これは、「満たす文字」<br />です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Initial quotes + </div> + <div class="parent"> + <div class="test"> + “これは、満たすための文字です。” + </div> + <br /> + <div class="no-wrap"> + “これは、満たすため<br />の文字です。” + </div> + </div> + </div> + <div class="wrapper"> + <div> + Final quotes + </div> + <div class="parent"> + <div class="test"> + これは、“満たす文字”です。 + </div> + <br /> + <div class="no-wrap"> + これは、“満たす文字”<br />です。 + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html new file mode 100644 index 0000000000..7827a684b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: hanging punctuation is scrollable overflow</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging-punctuation-property"> +<link rel="match" href="reference/hanging-scrollable-001-ref.html"> +<meta name="assert" content="Hanging characters that overflow their block container are treated as scrollable overflow. "> +<style> +div { + font-family: monospace; + font-size: 50px; + hanging-punctuation: last; + overflow: hidden; + color: red; +} +span {color: white; } +</style> + +<p>Test passes if there is no red below. +<table><tr><td><div id="t">X<span>”</span></div></table> +<!-- + The table is to do sizing based on the min content size. + A simpler test could be written using `div { width: min-content; }`, + but that is not widely supported yet. +--> + +<script> +document.getElementById("t").scrollLeft=100; +</script> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht new file mode 100644 index 0000000000..48be1d9806 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - allow-end - basic cases Reftest Reference</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <style type="text/css"> + <![CDATA[ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + <br /> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="no-wrap"> + これは満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これは満たす文字です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html new file mode 100644 index 0000000000..31f39ea163 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-family: monospace; + font-size: 60px; + line-height: 1.5em; /* computes to 90px */ + } + + /* + We draw the box (perfectly fitted to the content + in the block axis, because it has the same content) + but not the text. + */ + + div#box-drawn-under + { + background-color: lime; + border: black solid 3px; + color: transparent; + position: absolute; + width: 240px; + z-index: -1; + } + + /* + We draw the text, but into a wider box so + the period will fit, and overlap it with + the previously-drawn box. + */ + + div#text-drawn-over + { + border: transparent solid 3px; + width: 300px; + } + </style> + + <body lang="ja"> + + <div id="box-drawn-under">まだよく<br>ています。</div> + + <div id="text-drawn-over">まだよく<br>ています。<br>しかし特</div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht new file mode 100644 index 0000000000..1949939eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - first - basic cases Reftest Reference</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <style type="text/css"> + <![CDATA[ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .hanging { + left: -1em; + position: relative; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + Opening brackets + </div> + <div class="parent"> + <div class="no-wrap"> + <span class="hanging">「これは、満たすための</span><br />文字です。」 + </div> + <br /> + <div class="no-wrap"> + <span class="hanging">「これは、満たすための</span><br />文字です。」 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Closing brackets + </div> + <div class="parent"> + <div class="no-wrap"> + これは、「満たす文<br />字」です。 + </div> + <br /> + <div class="no-wrap"> + これは、「満たす文<br />字」です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Initial quotes + </div> + <div class="parent"> + <div class="no-wrap"> + <span class="hanging">“これは、満たすための</span><br />文字です。” + </div> + <br /> + <div class="no-wrap"> + <span class="hanging">“これは、満たすための</span><br />文字です。” + </div> + </div> + </div> + <div class="wrapper"> + <div> + Final quotes + </div> + <div class="parent"> + <div class="no-wrap"> + これは、“満たす文<br />字”です。 + </div> + <br /> + <div class="no-wrap"> + これは、“満たす文<br />字”です。 + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht new file mode 100644 index 0000000000..a9e7e0c1c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - force-end - basic cases Reftest Reference</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <style type="text/css"> + <![CDATA[ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + <br /> + <div class="no-wrap"> + これらは満たす文字で、<br />それらも満たす文字で<br />す。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="no-wrap"> + これは満たす文字です。 + </div> + <br /> + <div class="no-wrap"> + これは満たす文字です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC COMMA + </div> + <div class="parent"> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <div class="wrapper"> + <div> + HALFWIDTH IDEOGRAPHIC FULL STOP + </div> + <div class="parent"> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + <br /> + <div class="no-wrap"> + ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡ + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html new file mode 100644 index 0000000000..b679e5b913 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang=en> + +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> +div { font-size: 2em; } +#ref { color: blue; } +#test { color: orange; } +</style> + +<p>Test passes if the orange and blue pieces of text are laid out identically. + +<div id=ref>字字字字」</div> +<div id=test>字字字字」</div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html new file mode 100644 index 0000000000..c3d66aa366 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-family: monospace; + font-size: 60px; + line-height: 1.5em; /* computes to 90px */ + } + + span + { + background-color: lime; + border-bottom: black solid 3px; + border-top: black solid 3px; + } + + span#first + { + border-left: black solid 3px; + } + + span#third + { + border-right: black solid 3px; + } + </style> + + <body lang="ja"> + + <div><span id="first">まだよく</span><br> + + <span id="second">ています。</span><br> + + <span id="third">しかし特</span></div> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht new file mode 100644 index 0000000000..1f8aa4a57b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!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" xml:lang="ja"> + <head> + <title>CSS Test: hanging-punctuation - last - basic cases Reftest Reference</title> + <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> + <style type="text/css"> + <![CDATA[ + body { + font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; + } + .no-wrap { + white-space: nowrap; + } + .parent { + border: 1px solid gray; + margin-left: 2em; + width: 10em + } + div.wrapper { + display: inline-block; + border: 1px solid; + margin: 10px; + padding: 10px; + } + span.attention { + color: red; + } + ]]> + </style> + </head> + <body> + <p> + Test passes if each pair of upper and lower text in the square box is identical. + </p> + <div class="wrapper"> + <div> + Opening brackets + </div> + <div class="parent"> + <div class="no-wrap"> + 「これは、満たすため<br />の文字です。」 + </div> + <br /> + <div class="no-wrap"> + 「これは、満たすため<br />の文字です。」 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Closing brackets + </div> + <div class="parent"> + <div class="no-wrap"> + これは、「満たす文字」<br />です。 + </div> + <br /> + <div class="no-wrap"> + これは、「満たす文字」<br />です。 + </div> + </div> + </div> + <div class="wrapper"> + <div> + Initial quotes + </div> + <div class="parent"> + <div class="no-wrap"> + “これは、満たすため<br />の文字です。” + </div> + <br /> + <div class="no-wrap"> + “これは、満たすため<br />の文字です。” + </div> + </div> + </div> + <div class="wrapper"> + <div> + Final quotes + </div> + <div class="parent"> + <div class="no-wrap"> + これは、“満たす文字”<br />です。 + </div> + <br /> + <div class="no-wrap"> + これは、“満たす文字”<br />です。 + </div> + </div> + </div> + <p> + <span class="attention">* You will need a Japanese font.</span><br /> + If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html new file mode 100644 index 0000000000..25452e9221 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + +<p>Test passes if there is no red below. |