mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3
This commit is contained in:
WPT Sync Bot
parent
9f6005be16
commit
5fcf52d946
199 changed files with 4430 additions and 530 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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.
|
||||
-->
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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.
|
||||
-->
|
||||
|
|
@ -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>
|
||||
|
|
@ -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:
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
|
|
|||
6
tests/wpt/web-platform-tests/css/support/red-rect.svg
Normal file
6
tests/wpt/web-platform-tests/css/support/red-rect.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 269 B |
Loading…
Add table
Add a link
Reference in a new issue