diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css')
75 files changed, 1907 insertions, 84 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/align-items-007.html b/tests/wpt/web-platform-tests/css/css-flexbox/align-items-007.html new file mode 100644 index 00000000000..01e8f001a8a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/align-items-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The image should fit wholly within the flexbox." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; width: 100px; height: 100px; line-height: 20px; align-items: center; background: green;"> + <img src="../support/red-rect.svg"> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-lists/counter-set-001-ref.html b/tests/wpt/web-platform-tests/css/css-lists/counter-set-001-ref.html index be06ea1dc94..301197904a5 100644 --- a/tests/wpt/web-platform-tests/css/css-lists/counter-set-001-ref.html +++ b/tests/wpt/web-platform-tests/css/css-lists/counter-set-001-ref.html @@ -18,8 +18,8 @@ html,body { <span>7</span><!-- "7" --> <span>0</span><!-- "0" --> <span>7</span><!-- "7" --> -<span>8</span><!-- "8" --> -<span>2</span><!-- "2" --> +<span>6</span><!-- "6" --> +<span>0</span><!-- "0" --> <x> <span>2</span><!-- "2" --> </x> diff --git a/tests/wpt/web-platform-tests/css/css-lists/counter-set-001.html b/tests/wpt/web-platform-tests/css/css-lists/counter-set-001.html index 3be4c737c2b..4e28367798a 100644 --- a/tests/wpt/web-platform-tests/css/css-lists/counter-set-001.html +++ b/tests/wpt/web-platform-tests/css/css-lists/counter-set-001.html @@ -21,8 +21,8 @@ span::before { content: counters(n, '.'); } <span style="counter-set: n 7"></span><!-- "7" --> <span style="counter-set: n"></span><!-- "0" --> <span style="counter-set: n 8 n 7"></span><!-- "7" --> -<span style="counter-set: n 6; counter-increment: n 2"></span><!-- "8" --> -<span style="counter-set: n; counter-increment: n 2"></span><!-- "2" --> +<span style="counter-set: n 6; counter-increment: n 2"></span><!-- "6" --> +<span style="counter-set: n; counter-increment: n 2"></span><!-- "0" --> <x style="counter-reset: n 9"> <span style="counter-set: n 2"></span><!-- "2" --> </x> diff --git a/tests/wpt/web-platform-tests/css/css-lists/li-list-item-counter-ref.html b/tests/wpt/web-platform-tests/css/css-lists/li-list-item-counter-ref.html index 8340d6d7f65..96ca6c11221 100644 --- a/tests/wpt/web-platform-tests/css/css-lists/li-list-item-counter-ref.html +++ b/tests/wpt/web-platform-tests/css/css-lists/li-list-item-counter-ref.html @@ -17,10 +17,10 @@ body { margin-left: 10em; } <body> <ol><li value=0>a<li value=4>b<li value=4>c</ol> -<ol><li value=0>a<li value=9>b<li value=9>c</ol> -<ol><li value=-1>a<li value=3>b<li value=2>c</ol> <ol><li value=0>a<li value=4>b<li value=4>c</ol> -<ol><li value=2>a<li value=6>b<li value=8>c</ol> +<ol><li value=-1>a<li value=4>b<li value=3>c</ol> +<ol><li value=0>a<li value=4>b<li value=4>c</ol> +<ol><li value=2>a<li value=4>b<li value=6>c</ol> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/css-lists/li-value-counter-reset-001-ref.html b/tests/wpt/web-platform-tests/css/css-lists/li-value-counter-reset-001-ref.html index 9afb1ecfa05..6c6350c10f0 100644 --- a/tests/wpt/web-platform-tests/css/css-lists/li-value-counter-reset-001-ref.html +++ b/tests/wpt/web-platform-tests/css/css-lists/li-value-counter-reset-001-ref.html @@ -17,9 +17,9 @@ body { margin-left: 10em; } <body> <ol><li>a<li value=99>b</ol> -<ol><li>a<li value=149>b</ol> -<ol><li>a<li value=54>b</ol> -<ol><li>a<li value=149>b</ol> +<ol><li>a<li value=99>b</ol> +<ol><li>a<li value=4>b</ol> +<ol><li>a<li value=99>b</ol> <ol><li>a<li value=51>b</ol> <ol><li>a<li value=88>b</ol> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-006.html b/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-006.html new file mode 100644 index 00000000000..94b2469b0e6 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-006.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Position Absolute: Chrome crash</title> +<link rel="author" href="mailto:atotic@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=952644"> +<meta name="assert" content="abspos iframe with zoom gets laid out"> +<style> + .boundary { + overflow: hidden; + width: 100px; + height: 100px; + } + .abs { + position: absolute; + background: green; + zoom: 2; + } +</style> +<!-- Containing block with zoom causes zoomed abspos iframe +not to be laid out--> +<div class="boundary"> + <div id="parent"> + </div> +</div> +<script> + document.body.offsetTop; + let abs = document.createElement("iframe"); + abs.classList.add("abs"); + document.querySelector("#parent").appendChild(abs); + test(() => { + }, 'test passes if it does not crash'); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-007.html b/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-007.html new file mode 100644 index 00000000000..9c24210c257 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-007.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Position Absolute: Chrome crash</title> +<link rel="author" href="mailto:atotic@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://crbug.com/945696"> +<meta name="assert" content="Absolute descendant inside multiple nested split inlines does not crash."> +<style> + body { + overflow: hidden; + margin: 0px; + font-size: 24px; + } + #block-container { + position: relative; + } + #css-container { + position: relative; + font-size: 12px; + } + #anonymous-parent { + background-color: #FFFF7F; + } + #anonymous-split { + background-color: #FFD997; + } + #css-container { + background-color: #BEE0FF; + } + #abs { + background-color: rgba(0, 255, 0, 0.5); + position:absolute; + top: 0px; + left: 0px; + } + #fullabs { + background-color: rgba(0, 255, 0, 0.5); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } +</style> +<div id="block-container"> + <span id="anonymous-parent"> + parent <br>start + <span id="anonymous-split"> + split start + <div id="splitter" >splitter</div> + split middle + <span id="css-container"> + css-container start + <div id="abs">ABS</div> + <div id="fullabs">FULLABS</div> + css container end + </span> + split end + </span> + parent end + </span> +</div> +<script> +document.body.offsetTop; + test(() => { + }, 'test passes if it does not crash'); +</script> + diff --git a/tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-002.html b/tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-002.html new file mode 100644 index 00000000000..8ec3838fc77 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-002.html @@ -0,0 +1,51 @@ +<!doctype html> + +<link rel="author" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb"> +<meta name="assert" content="split inline containing blocks are handled correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + margin: 0; + } + #container-span { + position: relative; + outline: solid 1px gray; + } + #split { + width: 10px; + height: 10px; + } + #target { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,255,0,0.3); + } +</style> +<!-- There should be a green rectangle spanning two "container span" lines below --> +<span id="outer-span"> +outer span + <span id="container-span"> + container span start + <div id="split"></div> + <div id="target"></div> + container span end + </span> +outer span end +</span> +<script> + test(_ => { + let abs_bounds = document.querySelector("#target").getClientRects(); + let container_bounds = document.querySelector("#container-span").getClientRects(); + assert_equals(abs_bounds.length, 1); + assert_equals(container_bounds.length, 3); + assert_equals(abs_bounds[0].left, container_bounds[0].left, "left matches container"); + assert_equals(abs_bounds[0].top, container_bounds[0].top, "top matches container"); + assert_equals(abs_bounds[0].right, container_bounds[2].right, "right matches container"); + assert_equals(abs_bounds[0].bottom, container_bounds[2].bottom, "bottom matches container"); + }, "absolute inside inline container location should be correct."); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-001.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-001.html new file mode 100644 index 00000000000..0cd2243bdac --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: hyphenation and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated."> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 3em; + line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */ + width: 0; + hyphens: manual; + margin: 1em auto; + } + .ref { color: orange; } + span { color: transparent; } +</style> + +<p>Test passes if the black text is identical to the orange text (except the color). + +<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div> + +<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div> +<!-- +Using an invisible hyphen because it isn't certain what character the UA will actually use, +and we shouldn't fail the reftest because of a mismatch there. +See also hyphens-shaping-002.html to check that some character is inserted. +--> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-002.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-002.html new file mode 100644 index 00000000000..57d23e585e9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: hyphenation and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property"> +<link rel="mismatch" href="reference/hyphens-shaping-002-ref.html"> +<meta name="assert" content="Checks that some kind of hyphen does get inserted in Uyghur. (Complement fo hyphens-shaping-001.html)"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + /* The main text is invisible, + but we want to give the UA a chance to use the right hyphen, + which may be font dependent. + */ + div { + font-family: 'csstest_noto'; + font-size: 4em; + hyphens: manual; + margin: auto; + width: 0; + } + #test { color: transparent; } + span { color: black; } +</style> + +<p>Test passes if there is something below: + +<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-001.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-001.html new file mode 100644 index 00000000000..f7269e1cb94 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: manual hyphen and span</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<meta name="flags" content=""> +<link rel="match" href="reference/hyphens-span-001-ref.html"> +<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div><span>high</span>­way</div> +<div><span>high­</span>way</div> +<div>high<span>­</span>way</div> +<div>high<span>­way</span></div> +<div>high­<span>way</span></div> +<div><span>high</span>­<span>way</span></div> +<div><span>high­wa</span>y</div> +<div><span>hi</span>gh­way</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-002.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-002.html new file mode 100644 index 00000000000..07264faa7bb --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: auto hyphen and span</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<meta name="flags" content=""> +<link rel="match" href="reference/hyphens-span-002-ref.html"> +<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: auto; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div lang=en>highway</div> +<div lang=en><span>high</span>way</div> +<div lang=en>high<span></span>way</div> +<div lang=en>high<span>way</span></div> +<div lang=en><span>high</span><span>way</span></div> +<div lang=en><span>highwa</span>y</div> +<div lang=en><span>hi</span>ghway</div> + +<!-- +This test assumes the presence of "highway" +with a hyphenation point between "high" and "way" +in the hyphenation dictionary for English +in order to be useful, +but that assumption is not necessary for the test to be correct: +if the word doesn't hyphenate, +it will not hyphenate in any of the cases. +--> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html new file mode 100644 index 00000000000..9eb1d7fd686 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 3em; + line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */ + width: 0; + hyphens: manual; + margin: 1em auto; + } + .ref { color: orange; } +</style> + +<p>Test passes if the black text is identical to the orange text (except the color). + +<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div> + +<div dir=rtl lang=ug>ﺩﺍﻣﻴ<br>ﺪﻯ</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html new file mode 100644 index 00000000000..d8e31d71e4b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> + +<p>Test passes if there is something below: diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html new file mode 100644 index 00000000000..cbe37261375 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html new file mode 100644 index 00000000000..7b3f8206417 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: auto; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html new file mode 100644 index 00000000000..c86cb500286 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>‐</span><br>ample</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-ref.html new file mode 100644 index 00000000000..ad9df16e35d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>-</span><br>ample</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/hyphens/shy-styling-001.html b/tests/wpt/web-platform-tests/css/css-text/hyphens/shy-styling-001.html new file mode 100644 index 00000000000..98348d92a69 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/hyphens/shy-styling-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: soft hyphen styling</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<meta name="flags" content=""> +<link rel="match" href="reference/shy-styling-001-ref.html"> +<link rel="match" href="reference/shy-styling-001-alt-ref.html"> +<meta name="assert" content="hypens inserted where there was a soft-hyphen take on the styles that would have applied to the soft hyphen"> +<style> +div { + width: 0ch; + hyphens: manual; +} +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>­</span>ample</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/line-break/line-break-shaping-001.html b/tests/wpt/web-platform-tests/css/css-text/line-break/line-break-shaping-001.html new file mode 100644 index 00000000000..4ce1da2f30a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/line-break/line-break-shaping-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: line-break:anywhere and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-property"> +<link rel="match" href="reference/line-break-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by line-break:anywhere"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + position: relative; + } + #ref { + border: solid orange; + margin: 1rem; + } + #test { + border: solid blue; + position: absolute; /* to avoid influencing the size of the section */ + left: 1rem; + right: 1rem; + line-break: anywhere; + } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>عائلة</div> +</section> diff --git a/tests/wpt/web-platform-tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html new file mode 100644 index 00000000000..5543ab07294 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test ref</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + margin: 1rem; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + } + #ref { border: solid orange; } + #test { border: solid blue; } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>ﻋﺎﺋﻠ<br>ﺔ</div> +</section> diff --git a/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html new file mode 100644 index 00000000000..8846038d0fc --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:break-word and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:break-word"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + position: relative; + } + #ref { + border: solid orange; + margin: 1rem; + } + #test { + border: solid blue; + position: absolute; /* to avoid influencing the size of the section */ + left: 1rem; + right: 1rem; + overflow-wrap: break-word; + } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>عائلة</div> +</section> diff --git a/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html new file mode 100644 index 00000000000..adb25c78b7a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:anywhere and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:anywhere"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + position: relative; + } + #ref { + border: solid orange; + margin: 1rem; + } + #test { + border: solid blue; + position: absolute; /* to avoid influencing the size of the section */ + left: 1rem; + right: 1rem; + overflow-wrap: anywhere; + } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>عائلة</div> +</section> diff --git a/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html new file mode 100644 index 00000000000..5543ab07294 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test ref</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + margin: 1rem; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + } + #ref { border: solid orange; } + #test { border: solid blue; } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>ﻋﺎﺋﻠ<br>ﺔ</div> +</section> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html index 34757067b15..490d61be712 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html @@ -3,20 +3,16 @@ <title>test reference</title> <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> <style> -aside { - float: left; - background: blue; -} div { color: transparent; font-family: Ahem; font-size: 50px; - width: 5ch; + width: 3ch; + height: 2ch; + background: green; } </style> -<p>Test passes if there is a single blue rectangle below. +<p>Test passes if there is a single green rectangle below and no red. <div> - <aside class=own>X</aside> - <aside class=owbw>X</aside> </div> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html index 53cb2a083b0..5f94d076e84 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html @@ -3,6 +3,6 @@ <title>CSS test Reference</title> <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> -<p>This test passes if you can see the word PASS below, without any extra spaces. +<p>This test passes if the letters below are spaced equally. -<div>PASS</div> +<div>X X X X</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html new file mode 100644 index 00000000000..736a2d5607b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS test Reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> + +<style> +div { + font: 25px/1 Ahem; + color: green; +} +</style> + +<p>This test passes if there is a green rectangle and no red. + +<div>X<br>X<br>X<br>X</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-intrinsic-size-004.html b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-intrinsic-size-004.html index 510a5c5d141..42b94a72a5c 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-intrinsic-size-004.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-intrinsic-size-004.html @@ -6,25 +6,25 @@ <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> <meta name="flags" content=""> <link rel="match" href="reference/white-space-intrinsic-size-004-ref.html"> -<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic max-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference."> +<meta name="assert" content="Preserved spaces at the end of the line do affect the intrinsic max-content size when white-space is pre-wrap, as hanging does not prevent contributing to the max-content size. The value of overflow-wrap makes no difference."> <style> aside { float: left; white-space: pre-wrap; - background: blue; - margin-bottom: 1em; + background: green; } aside:last-of-type { overflow-wrap: break-word; } div { + background: red; color: transparent; font-family: Ahem; font-size: 50px; - width: 3ch; /* enough room for both floats if their max-content size does not include the preserved spaces, - but not enough if they do, causing a line break in that case. */ + width: 3ch; + height: 2em; } </style> -<p>Test passes if there is a single blue rectangle below. +<p>Test passes if there is a single green rectangle below and no red. <div> <aside>X </aside> <aside>X </aside> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html index d8e7c8278a9..76ca5ef77db 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html @@ -4,7 +4,7 @@ <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> <link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html"> -<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (maximum) intrinsic size."> +<meta name="assert" content="Hanging preserved white space at the end of the line when white-space is pre-wrap has no effect on the max-content size."> <style> span { @@ -15,6 +15,6 @@ span { #s2 { text-align: center; } </style> -<p>This test passes if you can see the word PASS below, without any extra spaces. +<p>This test passes if the letters below are spaced equally. -<div><span id=s1>P </span><span id=s2>A </span>SS</div> +<div><span id=s1>X </span><span id=s2>X </span>X X</div> diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html index 6b21df62c5c..4b6df8e93e0 100644 --- a/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html +++ b/tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html @@ -3,25 +3,19 @@ <title>CSS Text test: intrinsic minimum sizing of trailing spaces with white-space:pre-wrap</title> <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> -<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html"> +<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-003-ref.html"> <meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (minimum) intrinsic size."> <style> -/* Make the table invisible */ -table { border-collapse: collapse; } -td { padding: 0; } - -/* for the content of the table to be sized to their mininum intrinsic size */ -table { width: 0; } - -span { - display: inline-block; +div { + font: 25px/1 Ahem; white-space: pre-wrap; + width: min-content; + color: green; + background: red; } -#s1 { text-align: right; } -#s2 { text-align: center; } </style> -<p>This test passes if you can see the word PASS below, without any extra spaces. +<p>This test passes if there is a green rectangle and no red. -<table><td><span id=s1>P </span><td><span id=s2>A </span><td>SS</table> +<div>X X X X</div> diff --git a/tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html b/tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html index b883ce8d18d..dd08e559c92 100644 --- a/tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html +++ b/tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html @@ -23,32 +23,27 @@ on it from the completed transitions."> <script> promise_test(async t => { - // Create element but do not attach it to the document + // Create element and remove it from the document const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); + div.remove(); + + // Attach event listeners + div.addEventListener('transitionrun', t.step_func(() => { + assert_unreached('transitionrun event should not be fired'); + })); // Resolve before-change style getComputedStyle(div).backgroundColor; - // Set up after-change style + // Set up and resolve after-change style div.style.backgroundColor = 'green'; + getComputedStyle(div).backgroundColor; - assert_equals( - getComputedStyle(div).backgroundColor, - 'rgb(255, 0, 0)', - 'No transition should run' - ); - - // Wait a frame just to be sure the UA does not start the transition on the - // next frame. + // There should be no events received for the triggered transition. + await waitForFrame(); await waitForFrame(); - - assert_equals( - getComputedStyle(div).backgroundColor, - 'rgb(255, 0, 0)', - 'No transition should run even after waiting a frame' - ); }, 'Transitions do not run on an element not in the document'); test(t => { @@ -56,6 +51,7 @@ test(t => { const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); + div.remove(); // Resolve before-change style getComputedStyle(div).backgroundColor; @@ -63,9 +59,12 @@ test(t => { // Add to document document.documentElement.append(div); - // Set up after-change style + // Set up and resolve after-change style div.style.backgroundColor = 'green'; + getComputedStyle(div).backgroundColor; + // We should have jumped immediately to the after-change style rather than + // transitioning to it. assert_equals( getComputedStyle(div).backgroundColor, 'rgb(0, 128, 0)', @@ -78,7 +77,6 @@ promise_test(async t => { const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); - document.documentElement.append(div); // Attach event listeners div.addEventListener('transitionrun', t.step_func(() => { @@ -95,9 +93,6 @@ promise_test(async t => { div.remove(); // There should be no events received for the triggered transition. - // - // (We can't verify the presence/absence of transitions by querying - // getComputedStyle for this case because it will return an empty string.) await waitForFrame(); await waitForFrame(); }, 'Transitions do not run for an element newly removed from the document'); @@ -107,7 +102,6 @@ promise_test(async t => { const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); - document.documentElement.append(div); // Attach event listeners const eventWatcher = new EventWatcher(t, div, [ @@ -131,13 +125,11 @@ promise_test(async t => { promise_test(async t => { // Create a container element. We'll need this later. const container = addDiv(t); - document.documentElement.append(container); // Create element and attach it to the document const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); - document.documentElement.append(div); // Attach event listeners const eventWatcher = new EventWatcher(t, div, [ @@ -164,15 +156,10 @@ promise_test(async t => { }, 'Transitions are canceled when an element is re-parented'); promise_test(async t => { - // Create a container element. We'll need this later. - const container = addDiv(t); - document.documentElement.append(container); - // Create element and attach it to the document const div = addDiv(t, { style: 'transition: background-color 100s; background-color: red', }); - document.documentElement.append(div); // Attach event listeners const eventWatcher = new EventWatcher(t, div, [ @@ -187,7 +174,7 @@ promise_test(async t => { await eventWatcher.wait_for('transitionrun'); - // Re-parent element to same container + // Re-parent element to same parent document.documentElement.append(div); await eventWatcher.wait_for('transitioncancel'); diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-001-manual.html new file mode 100644 index 00000000000..31186029dec --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-001-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, vertical lines</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p> +<div class="test"> +<span lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-002-manual.html new file mode 100644 index 00000000000..bb53c939e84 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-002-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, line wrap</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will wrap lines from left to right."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; } +.test span { background-color:orange; color:orange; } +.test span#end { background-color:blue; color:blue; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the right-most side.</p> +<div class="test"> +<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ ᠪᠠᠭᠰᠢ ᠶᠢᠨ <span id="end">ᠦᠭᠦᠯᠡᠯ</span></span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-003-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-003-manual.html new file mode 100644 index 00000000000..1aaf29d2e6d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-003-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, alignment</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; border: 1px solid orange; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the left side of the square box.</p> +<div class="test"> +<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ</span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-005-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-005-manual.html new file mode 100644 index 00000000000..2bbdca59998 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-005-manual.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, default Mongolian orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if text is vertical and the Mongolian characters are oriented the same way as on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-006-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-006-manual.html new file mode 100644 index 00000000000..0ceb4a74bb9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-006-manual.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, Mongolian joining</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the Mongolian characters are joined as shown on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-007-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-007-manual.html new file mode 100644 index 00000000000..8317c5c8efd --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-007-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, default Latin orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Latin characters rotated 90° right."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px;color: #ccc; } +span[lang=en] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn+latin.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-008-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-008-manual.html new file mode 100644 index 00000000000..21abffa9194 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-008-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, default Arabic orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-009-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-009-manual.html new file mode 100644 index 00000000000..ba2ca64828f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-009-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, default Arabic direction</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-010-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-010-manual.html new file mode 100644 index 00000000000..4dc9430b8da --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-010-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, Arabic joining</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p> +<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-012-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-012-manual.html new file mode 100644 index 00000000000..ebf773c5559 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-012-manual.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, Latin wrapping</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px; color: #ccc; } +span[lang=en] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +<script> +function setMargin (height) { + document.getElementById('test').style.height = height+'px' + } +</script> +</head> +<body> +<p class="instructions">Test passes if the two Latin script words are displayed in the same relative positions around the line break as on the blue background.</p> +<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p> +<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn_en_wrap.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-014-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-014-manual.html new file mode 100644 index 00000000000..656f78759db --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-014-manual.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, Arabic wrapping</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +<script> +function setMargin (height) { + document.getElementById('test').style.height = height+'px' + } +</script> +</head> +<body> +<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p> +<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p> +<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div> +<div class="ref"><img src="support/mn_ar_wrap.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-015-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-015-manual.html new file mode 100644 index 00000000000..a8fe0055395 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-015-manual.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, image orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, replaced content such as images is displayed upright."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; color: #ccc; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p> +<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <img src="support/world.gif" alt="ref image"/> ᠤᠯᠤᠰ</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html new file mode 100644 index 00000000000..02e0dd8da0d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, input type=text</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +input { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<input type="text" value="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" /> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html new file mode 100644 index 00000000000..b89ea1addb3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, input type=text placeholder</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +input { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<input type="text" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" /> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html new file mode 100644 index 00000000000..bfd90f8438f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, textarea</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +textarea { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<textarea rows="3">ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ</textarea> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html new file mode 100644 index 00000000000..fd44a2b6ed7 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, textarea placeholder</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +textarea { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<textarea rows="3" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ"></textarea> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html new file mode 100644 index 00000000000..0ef619a636f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, select, selected item</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +select { font-family: webfont; font-size: 24px; } +.test { text-align: center; vertical-align: middle; width: 100%; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<select> +<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option> +<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option> +<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option> +</select> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html new file mode 100644 index 00000000000..16162c2a3cd --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, select, options</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display selection options vertically."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +select { font-family: webfont; font-size: 24px; } +.test { text-align: center; vertical-align: middle; width: 100%; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p> +<div class="test"> +<select> +<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option> +<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option> +<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option> +</select> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html new file mode 100644 index 00000000000..21bd590863b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, vertical lines</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically within a table cell."/> +<style type="text/css"> +@font-face { + font-family: 'webfont'; + src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p> +<div class="test"> +<table><tbody> +<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr> +<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr> +</tbody></table> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html new file mode 100644 index 00000000000..3a41d1fa604 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-lr, table cell order</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left."/> +<style type="text/css"> +.test { font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-lr; } +</style> +</head> +<body> +<p class="instructions">Test passes if the numbers increase top-to-bottom, starting on the left.</p> +<div class="test"> +<table><tbody> +<tr><th>1</th><th>2</th></tr> +<tr><td>3</td><td>4</td></tr> +</tbody></table> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-001-manual.html new file mode 100644 index 00000000000..a4f995f4b7f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-001-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, vertical lines</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p> +<div class="test"> +<span lang="zh-hans">国际化活动万维网联盟</span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-002-manual.html new file mode 100644 index 00000000000..7c7bcfbcdc6 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-002-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, line wrap</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will wrap lines from right to left."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +.test span#end { background-color:blue; color:blue; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the left-most side.</p> +<div class="test"> +<span lang="zh-hans">国际化活动万维网联盟国际化活动万维<span id="end">网联盟</span></span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-003-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-003-manual.html new file mode 100644 index 00000000000..64fcb66b133 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-003-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, alignment</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; border: 1px solid orange; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the right side of the square box.</p> +<div class="test"> +<span lang="zh-hans">国际化活动万维网联盟</span> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-005-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-005-manual.html new file mode 100644 index 00000000000..c6462f2fe1a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-005-manual.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, default Han orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-rl will display chinese characters upright."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the text is vertical and the Chinese characters are oriented the same way as on the blue background.</p> +<div class="test" lang="mn">国际化活动万维网联盟</div> +<div class="ref"><img src="support/zh-orientation.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-007-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-007-manual.html new file mode 100644 index 00000000000..3427f74990c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-007-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, default Latin orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-lr will display Latin characters rotated 90° right by default."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=en] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p> +<div class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div> +<div class="ref"><img src="support/zh+latin.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-008-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-008-manual.html new file mode 100644 index 00000000000..7d2a3bb6a7b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-008-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, default Arabic orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p> +<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div> +<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-009-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-009-manual.html new file mode 100644 index 00000000000..6dff8d7efbe --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-009-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, default Arabic direction</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p> +<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div> +<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-010-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-010-manual.html new file mode 100644 index 00000000000..e81a579c75a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-010-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, Arabic joining</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p> +<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div> +<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-012-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-012-manual.html new file mode 100644 index 00000000000..a53ec5c14f4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-012-manual.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, Latin wrapping</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 250px; color: #ccc; } +span[lang=en] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +<script> +function setMargin (height) { + document.getElementById('test').style.height = height+'px' + } +</script> +</head> +<body> +<p class="instructions">Test passes if the two Latin words on the left are displayed in the same relative positions around a line break as on the blue background.</p> +<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="250" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p> +<div id="test" class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div> +<div class="ref"><img src="support/zh_en_wrap.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-014-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-014-manual.html new file mode 100644 index 00000000000..bf3424fd043 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-014-manual.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, Arabic wrapping</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 200px; color: #ccc; } +span[lang=ar] { color: black; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +<script> +function setMargin (height) { + document.getElementById('test').style.height = height+'px' + } +</script> +</head> +<body> +<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p> +<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="200" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p> +<div id="test" class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div> +<div class="ref"><img src="support/zh_ar_wrap.png" alt="ref image"/></div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-015-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-015-manual.html new file mode 100644 index 00000000000..cfcdf2f51b7 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-015-manual.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, image orientation</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="By default, replaced content such as images is displayed upright."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; color: #ccc; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p> +<div id="test" class="test" lang="zh-hans">国际化活动<img src="support/world.gif" alt="ref image"/>万维网联盟</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html new file mode 100644 index 00000000000..0548cb96828 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, input type=text</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +input { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<input type="text" value="国际化活动W3C i18n万维网联盟" /> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html new file mode 100644 index 00000000000..3de4c72c3ff --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, input type=text placeholder</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +input { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<input type="text" placeholder="国际化活动W3C i18n万维网联盟" /> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html new file mode 100644 index 00000000000..e07502e4fce --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, textarea</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +textarea { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<textarea rows="3">国际化活动W3C i18n万维网联盟</textarea> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html new file mode 100644 index 00000000000..42bef3494f9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, textarea placeholder</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +textarea { font-family: webfont; font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<textarea rows="3" placeholder="国际化活动W3C i18n万维网联盟"></textarea> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html new file mode 100644 index 00000000000..7177c316d71 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, select, selected item</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +select { font-family: webfont; font-size: 24px; } +.test { text-align: center; vertical-align: middle; width: 100%; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p> +<div class="test"> +<select> +<option value="1">国际化活动item1万维网联盟</option> +<option value="2">国际化活动item2万维网联盟</option> +<option value="3">国际化活动item3万维网联盟</option> +</select> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html new file mode 100644 index 00000000000..2ed6bc99828 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, select, options</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display selection options vertically."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +select { font-family: webfont; font-size: 24px; } +.test { text-align: center; vertical-align: middle; width: 100%; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p> +<div class="test"> +<select> +<option value="1">国际化活动item1万维网联盟</option> +<option value="2">国际化活动item2万维网联盟</option> +<option value="3">国际化活动item3万维网联盟</option> +</select> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html new file mode 100644 index 00000000000..1705beb7915 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, vertical lines</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically within a table cell."/> +<style type="text/css"> +@font-face { + font-family: "webfont"; + src: url("../../fonts/mplus-1p-regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + } +.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; } +.test span { background-color:orange; color:orange; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p> +<div class="test"> +<table><tbody> +<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr> +<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr> +</tbody></table> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html new file mode 100644 index 00000000000..0f1c1d19977 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>writing mode:vertical-rl, table cell order</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/> +<meta name="assert" content="writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right."/> +<style type="text/css"> +.test { font-size: 34px; } +</style> +<!-- this is the test --> +<style type="text/css"> +.test { writing-mode: vertical-rl; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the numbers increase top-to-bottom, starting on the right.</p> +<div class="test"> +<table><tbody> +<tr><th>1</th><th>2</th></tr> +<tr><td>3</td><td>4</td></tr> +</tbody></table> +</div> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky-container-for-abspos.html b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky-container-for-abspos.html new file mode 100644 index 00000000000..7f5ec306483 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky-container-for-abspos.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSSOM: resolved values of the inset properties for sticky positioning</title> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value"> +<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos"> +<link rel="author" title="Joonghun Park" href="mailto:pjh0718@gmail.com"> +<style> + #container-for-abspos { + height: 200px; + width: 400px; + overflow: hidden; + } +</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script type="module"> +import {runTests, containerForAbspos} from "./support/getComputedStyle-insets.js"; +runTests({ + style: "position: sticky;", + containingBlockElement: containerForAbspos, + containingBlockArea: "content", + preservesPercentages: false, + preservesAuto: true, + canStretchAutoSize: false, +}); +</script> diff --git a/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky.html b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky.html index 6149acc6d7d..6b23fabcb14 100644 --- a/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky.html +++ b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-insets-sticky.html @@ -4,12 +4,15 @@ <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value"> <link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch"> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> + #container-for-inflow { overflow: hidden; } +</style> <script src=/resources/testharness.js></script> <script src=/resources/testharnessreport.js></script> <script type="module"> import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js"; runTests({ - style: "position: sticky; position: -webkit-sticky", + style: "position: sticky;", containingBlockElement: containerForInflow, containingBlockArea: "content", preservesPercentages: false, diff --git a/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-sticky-pos-percent.html b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-sticky-pos-percent.html new file mode 100644 index 00000000000..12ad5e89653 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/cssom/getComputedStyle-sticky-pos-percent.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Test: resolve top percentage value against proper box</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3115" /> +<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos" /> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values" /> +<meta name="assert" content="Test that the sticky percentage insets are +resolved against the right ancestor, i.e. the nearest scrollport." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="height: 500px; background: purple; overflow: hidden;"> + <div style="height: 400px; background: yellow;"> + <div id="target" style="height: 100px; position: sticky; left: 0; top: 50%; background: blue;"> + </div> + </div> +</div> +<script> +test(() => { + assert_equals(getComputedStyle(target).top, '250px'); +}, "Sticky element's top property percentage value should be resolved against the div with overflow: hidden"); +</script> diff --git a/tests/wpt/web-platform-tests/css/cssom/support/getComputedStyle-insets.js b/tests/wpt/web-platform-tests/css/cssom/support/getComputedStyle-insets.js index beec32e76bc..723990cafbc 100644 --- a/tests/wpt/web-platform-tests/css/cssom/support/getComputedStyle-insets.js +++ b/tests/wpt/web-platform-tests/css/cssom/support/getComputedStyle-insets.js @@ -22,7 +22,6 @@ stylesheet.textContent = ` padding: 1px 2px; border-width: 2px 4px; margin: 4px 8px; - overflow: hidden; } #container-for-abspos { /* Padding area: 200px tall, 400px wide */ @@ -48,7 +47,7 @@ stylesheet.textContent = ` border-style: solid; } `; -document.head.appendChild(stylesheet); +document.head.prepend(stylesheet); function runTestsWithWM(data, testWM, cbWM) { const { @@ -149,10 +148,10 @@ function runTestsWithWM(data, testWM, cbWM) { bottom: "50%", right: "75%", }, { - top: .1 * cbHeight + "px", - left: .25 * cbWidth + "px", - bottom: .5 * cbHeight + "px", - right: .75 * cbWidth + "px", + top: cbHeight * 10 / 100 + "px", + left: cbWidth * 25 / 100 + "px", + bottom: cbHeight * 50 / 100 + "px", + right: cbWidth * 75 / 100 + "px", }, "Percentages are absolutized into pixels"); checkStyle({ @@ -161,10 +160,10 @@ function runTestsWithWM(data, testWM, cbWM) { bottom: "calc(50% - 3px)", right: "calc(75% - 4px)", }, { - top: .1 * cbHeight - 1 + "px", - left: .25 * cbWidth - 2 + "px", - bottom: .5 * cbHeight - 3 + "px", - right: .75 * cbWidth - 4 + "px", + top: cbHeight * 10 / 100 - 1 + "px", + left: cbWidth * 25 / 100 - 2 + "px", + bottom: cbHeight * 50 / 100 - 3 + "px", + right: cbWidth * 75 / 100 - 4 + "px", }, "calc() is absolutized into pixels"); } diff --git a/tests/wpt/web-platform-tests/css/support/red-rect.svg b/tests/wpt/web-platform-tests/css/support/red-rect.svg new file mode 100644 index 00000000000..3fe10a2b6fd --- /dev/null +++ b/tests/wpt/web-platform-tests/css/support/red-rect.svg @@ -0,0 +1,6 @@ +<?xml version="1.0"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" + "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"> + <rect width="200" height="100" style="fill:red;" /> +</svg> |
