Commit b3242253 authored by Chromium WPT Sync's avatar Chromium WPT Sync Committed by Commit Bot

Import wpt@9cd6f7a49659597a7c0b485a9dadf1e7d60d346a

Using wpt-import in Chromium 7f9a64d3.
With Chromium commits locally applied on WPT:
ad9cc156 "Add WPT tests for feature policy frame policy"


Build: https://ci.chromium.org/buildbot/chromium.infra.cron/wpt-importer/13840

Note to sheriffs: This CL imports external tests and adds
expectations for those tests; if this CL is large and causes
a few new failures, please fix the failures by adding new
lines to TestExpectations rather than reverting. See:
https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md

Directory owners for changes in this CL:
kojii@chromium.org:
  external/wpt/css/css-text/line-break

TBR=leon.han@intel.com

No-Export: true
Change-Id: I75a7369414f6594b2fb3bb9cdd0a4a031d13391c
Reviewed-on: https://chromium-review.googlesource.com/962343
Commit-Queue: Blink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Reviewed-by: default avatarBlink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543074}
parent 18c898ac
...@@ -1811,8 +1811,6 @@ crbug.com/626703 external/wpt/css/css-fonts/font-variant-position-03.html [ Fail ...@@ -1811,8 +1811,6 @@ crbug.com/626703 external/wpt/css/css-fonts/font-variant-position-03.html [ Fail
crbug.com/626703 external/wpt/css/css-fonts/font-variant-position.html [ Failure ] crbug.com/626703 external/wpt/css/css-fonts/font-variant-position.html [ Failure ]
crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006b.xht [ Failure ] crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006b.xht [ Failure ]
crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006c.xht [ Failure ] crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006c.xht [ Failure ]
crbug.com/626703 external/wpt/css/css-text/line-break/line-break-anywhere-001.html [ Failure ]
crbug.com/626703 external/wpt/css/css-text/line-break/line-break-anywhere-002.html [ Failure ]
crbug.com/626703 external/wpt/css/css-ui/text-overflow-010.html [ Failure ] crbug.com/626703 external/wpt/css/css-ui/text-overflow-010.html [ Failure ]
crbug.com/626703 external/wpt/css/css-ui/text-overflow-021.html [ Failure ] crbug.com/626703 external/wpt/css/css-ui/text-overflow-021.html [ Failure ]
crbug.com/626703 external/wpt/css/cssom-view/matchMedia.xht [ Timeout ] crbug.com/626703 external/wpt/css/cssom-view/matchMedia.xht [ Timeout ]
......
...@@ -944,24 +944,6 @@ crbug.com/666657 external/wpt/css/css-text-decor/text-emphasis-style-string-001. ...@@ -944,24 +944,6 @@ crbug.com/666657 external/wpt/css/css-text-decor/text-emphasis-style-string-001.
# These are added to W3CImportExpectations as Skip, remove when next import is done. # These are added to W3CImportExpectations as Skip, remove when next import is done.
crbug.com/666657 external/wpt/css/css-text/hanging-punctuation [ Skip ] crbug.com/666657 external/wpt/css/css-text/hanging-punctuation [ Skip ]
crbug.com/666657 external/wpt/css/css-text/line-break/line-break-anywhere-001.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/line-break/line-break-anywhere-002.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-001.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-002.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-003.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-004.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-005.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-align/text-align-justifyall-006.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-transform/text-transform-fullwidth-001.xht [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-transform/text-transform-fullwidth-002.xht [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-transform/text-transform-fullwidth-004.xht [ Skip ]
crbug.com/666657 external/wpt/css/css-text/text-transform/text-transform-fullwidth-005.xht [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/pre-wrap-008.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/pre-wrap-010.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/textarea-pre-wrap-010.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/textarea-pre-wrap-008.html [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/white-space-collapsing-discard-001.xht [ Skip ]
crbug.com/666657 external/wpt/css/css-text/white-space/white-space-collapsing-preserve-breaks-001.xht [ Skip ]
crbug.com/505151 external/wpt/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht [ Failure ] crbug.com/505151 external/wpt/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht [ Failure ]
crbug.com/505151 external/wpt/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-005.xht [ Failure ] crbug.com/505151 external/wpt/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-005.xht [ Failure ]
......
<?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="flags" content="font" />
<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>
<?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="flags" content="font" />
<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>
<?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="flags" content="font" />
<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>
<?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="flags" content="font" />
<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>
<?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>
<?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>
<?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>
<?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>
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Text Test: line-break: anywhere</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
<link rel="match" href="reference/line-break-anywhere-001-ref.html">
<meta name="flags" content="">
<meta name="assert" content="line-break:anywhere puts a soft wrap opportunity around every typographic character unit,
including around punctuation or in the middle of words,
disregarding any prohibition against line breaks introduced by characters with the GL, JW, or ZJW character class.">
<style>
#green {
position: absolute;
background: green;
font-family: monospace;
width: 1ch;
height: 20em;
}
#test {
width: 1ch;
line-height: 1;
color: red;
font-family: monospace;
line-break: anywhere;
}
</style>
<p>Test passes if there is a green rectangle below and no red.</p>
<div id=green></div>
<!-- with line breaks everywhere, none of the following characters should stick out from under the green div -->
<div id=test>aa-a.a)a,a)a&nbsp;a&#xfeff;a&#x2060;a&#x200d;a・a</div>
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Text Test: line-break: anywhere</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
<link rel="match" href="reference/line-break-anywhere-001-ref.html">
<meta name="flags" content="">
<meta name="assert" content="line-break:anywhere puts a soft wrap opportunity betwwen letters in the middle of words and hyphenation is not applied.">
<style>
#green {
position: absolute;
background: green;
font-family: monospace;
width: 1ch;
height: 20em;
}
#test {
width: 1ch;
line-height: 1;
color: red;
font-family: monospace;
line-break: anywhere;
hyphens: auto;
}
</style>
<p>Test passes if there is a green rectangle below and no red.</p>
<div id=green></div>
<!-- Hyphenation, if it occurs, will produce a hyphen that sticks out from under the green rectangle.
Also, if the words fails to be wrapped between all letters, letters will also stick out from under the green rectangle -->
<div id=test>no hyphenation</div>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; direction: rtl; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; direction: ltr; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-003.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="test" dir="rtl">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='match' href='reference/text-align-justifyall-ref-004.html'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, RTL first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-005.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div dir="auto" class="test">&rlm;XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, LTR first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-006.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div dir="rtl">
<div dir="auto" class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Text Test: text-transform: full-width (basic)</title>
<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/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
<link rel="match" href="text-transform-fullwidth-002-ref.xht" />
<meta content="" name="flags" />
<meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width Latin characters are typeset upright, then the characters of the text sample of this test should not be rotated toward the right but should be upright." name="assert" />
<meta name="DC.date.created" content="2017-01-11T09:54:03+11:00" scheme="W3CDTF" />
<meta name="DC.date.modified" content="2017-01-12T09:54:03+11:00" scheme="W3CDTF" />
<style type="text/css"><![CDATA[
div
{
font-size: 32px;
text-transform: full-width;
writing-mode: vertical-rl;
}
]]></style>
</head>
<body>
<p>Test passes if the "Text sample" characters are translated upright and not rotated toward the righthand side.</p>
<div>Text sample</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Text Test: text-transform: full-width with 1 single digit (basic)</title>
<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/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
<link rel="match" href="text-transform-fullwidth-004-ref.xht" />
<meta content="" name="flags" />
<meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width digit characters are typeset upright, then the single digit character in the text sample should not be rotated toward the right but should be upright." name="assert" />
<meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
<meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
<style type="text/css"><![CDATA[
div
{
writing-mode: vertical-rl;
}
span
{
text-transform: full-width;
}
]]></style>
</head>
<body>
<p>Test passes if both "6" glyphs have <strong>identical</strong> layout and orientation.</p>
<div>
<h1 id="test"><span>&#54;</span></h1>
<!-- 6 == &#54; or &x36; or U+0036 In the basic latin range: ASCII Digit 6 -->
<h1 id="reference">&#65302;</h1>
<!--
6 == &#65302; or &xFF16; or U+FF16 is the FULLWIDTH DIGIT 6 (≈ <wide> 0036 6)
In the Halfwidth and Fullwidth Forms range:
http://unicode.org/charts/PDF/UFF00.pdf
-->
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Text Test: text-transform: full-width with 2 digits (basic)</title>
<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/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
<link rel="match" href="text-transform-fullwidth-005-ref.xht" />
<meta content="" name="flags" />
<meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width digit characters are typeset upright, then both digit characters in the text sample should not be rotated toward the right but should be upright. This is furthermore the case since, in this test, there is no 'text-combine-upright' in effect or applying to such pair of digits." name="assert" />
<meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
<meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
<style type="text/css"><![CDATA[
div
{
writing-mode: vertical-rl;
}
span
{
text-transform: full-width;
}
]]></style>
</head>
<body>
<p>Test passes if both pairs of "23" glyphs have <strong>identical</strong> layout and orientation.</p>
<div>
<h1 id="test"><span>&#50;&#51;</span></h1>
<!-- &#50; or &#x32; or U+0032 In the basic latin range: ASCII Digit 2 -->
<!-- &#51; or &#x33; or U+0033 In the basic latin range: ASCII Digit 3 -->
<h1 id="reference">&#65298;&#65299;</h1>
<!--
2 == &#65298; or &xFF12; or U+FF12 is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)
3 == &#65299; or &xFF13; or U+FF13 is the FULLWIDTH DIGIT 3 (≈ <wide> 0033 3)
In the Halfwidth and Fullwidth Forms range:
http://unicode.org/charts/PDF/UFF00.pdf
-->
</div>
</body>
</html>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap is wrapped when overflow-wrap is break-spaces</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-spaces">
<link rel="match" href="reference/pre-wrap-001-ref.html">
<meta name="assert" content="preserved white space at the end of the line is wrapped when the white-space property is set to pre-wrap and overflow-wrap is break-spaces.">
<style>
div {
font-size: 20px;
font-family: Ahem;
line-height: 1em;
white-space: pre-wrap;
color: green;
background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
width: 4ch;
overflow-wrap: break-spaces;
margin-left: -1ch;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div> XX XX</div>
</body>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: single preserved white space at the end of with white-space:pre-wrap overflow-wrap:break-spaces break-word</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
<link rel="match" href="reference/pre-wrap-001-ref.html">
<meta name="assert" content="a single preserved white space at the end of the line is wrapped when the white-space property is set to pre-wrap and overflow-wrap is break-spaces break-word.">
<style>
div {
font-size: 20px;
font-family: Ahem;
line-height: 1em;
white-space: pre-wrap;
color: green;
background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
width: 3ch;
overflow-wrap: break-spaces break-word;
margin-left: -1ch;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div> XX XX</div>
</body>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap is wrapped when overflow-wrap is break-spaces in a textarea</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-spaces">
<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
<meta name="assert" content="preserved white space at the end of the line is wrapped when the white-space property is set to pre-wrap and overflow-wrap is break-spaces in a textarea.">
<style>
textarea {
word-wrap: initial; /*deprecated alias*/
overflow-wrap: initial;
line-break: initial;
word-break: initial;
margin: 0;
padding: 0;
border: none;
outline: none;
resize: none;
overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
font-size: 20px;
font-family: Ahem;
line-height: 1em;
white-space: pre-wrap;
color: green;
background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
width: 4ch;
overflow-wrap: break-spaces;
margin-left: -1ch;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<textarea> XX XX</textarea>
</body>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: single preserved white space at the end of with white-space:pre-wrap overflow-wrap:break-spaces break-word in a textarea</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
<meta name="assert" content="a single preserved white space at the end of the line is wrapped when the white-space property is set to pre-wrap and overflow-wrap is break-spaces break-word in a textarea.">
<style>
textarea {
word-wrap: initial; /*deprecated alias*/
overflow-wrap: initial;
line-break: initial;
word-break: initial;
margin: 0;
padding: 0;
border: none;
outline: none;
resize: none;
overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
font-size: 20px;
font-family: Ahem;
line-height: 1em;
white-space: pre-wrap;
color: green;
background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
width: 3ch;
overflow-wrap: break-spaces break-word;
margin-left: -1ch;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<textarea> XX XX</textarea>
</body>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - discard - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<link rel="help" title="CSS Text Level 3: 4.1. White Space Collapsing: the ‘white-space-collapsing’ property" href="http://www.w3.org/TR/css-text-3/#white-space-collapsing" />
<link rel="match" href="reference/white-space-collapsing-discard-001-ref.xht"/>
<meta name="flags" content="" />
<meta name="assert" content="The UA should discard all white space in the element when white-space-collapsing is set to discard." />
<style type="text/css">
<![CDATA[
.test span {
white-space-collapsing: discard;
}
/* the CSS below is not part of the test */
span {
color: Blue;
}
]]>
</style>
</head>
<body>
<p>
Test passes if the first sentence matches the second one.
</p>
<div class="test">
<span>All White Space In The Element Should Be Discarded.</span>
</div>
<div class="control">
<span>AllWhiteSpaceInTheElementShouldBeDiscarded.</span>
</div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - preserve-breaks - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<link rel="help" title="CSS Text Level 3: 4.1. White Space Collapsing: the ‘white-space-collapsing’ property" href="http://www.w3.org/TR/css-text-3/#white-space-collapsing" />
<link rel="match" href="reference/white-space-collapsing-preserve-breaks-001-ref.xht"/>
<meta name="flags" content="" />
<meta name="assert" content="The UA should collapse sequences of white space into a single character when white-space-collapsing is set to preserve." />
<style type="text/css">
<![CDATA[
.test span {
white-space-collapsing: preserve-breaks;
}
/* the CSS below is not part of the test */
span {
color: Blue;
}
]]>
</style>
</head>
<body>
<p>
Test passes if the first two sentences matches the second one.
</p>
<p class="test">
<span>
Sequences of white space should collapse into a single character.
But segment breaks as forced line breaks are preserved.
</span>
</p>
<p>
<span>
Sequences of white space should collapse into a single character.<br />
But segment breaks as forced line breaks are preserved.
</span>
</p>
</body>
</html>
["replace",
"NOBODY",
"@ FD ;",
"it does not matter, you see \f",
"text/plain",
"text/xml",
"application/octet-stream",
"\0"].forEach(type => {
async_test(t => {
const frame = document.body.appendChild(document.createElement("iframe"));
t.add_cleanup(() => frame.remove());
frame.contentDocument.open(type);
frame.contentDocument.write("<B>heya</b>");
frame.contentDocument.close();
assert_equals(frame.contentDocument.body.firstChild.localName, "b");
assert_equals(frame.contentDocument.body.textContent, "heya");
assert_equals(frame.contentDocument.contentType, "text/html");
t.done();
}, "document.open() with type set to: " + type + " (type argument is supposed to be ignored)");
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment