mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15: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
|
|
@ -43,6 +43,31 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<script id="stateless_animator_preserves_effect_local_time" type="text/worklet">
|
||||
registerAnimator("stateless_animator_preserves_effect_local_time", class {
|
||||
animate(currentTime, effect) {
|
||||
// The local time will be carried over to the new global scope.
|
||||
effect.localTime = effect.localTime ? effect.localTime + 1 : 1;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="stateless_animator_does_not_copy_effect_object" type="text/worklet">
|
||||
registerAnimator("stateless_animator_does_not_copy_effect_object", class {
|
||||
animate(currentTime, effect) {
|
||||
effect.localTime = effect.localTime ? effect.localTime + 1 : 1;
|
||||
effect.foo = effect.foo ? effect.foo + 1 : 1;
|
||||
// This condition becomes true once we switch global scope and only preserve local time
|
||||
// otherwise these values keep increasing in lock step.
|
||||
if (effect.localTime > effect.foo) {
|
||||
// This works as long as we switch global scope before 10000 frames.
|
||||
// which is a safe assumption.
|
||||
effect.localTime = 10000;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="state_function_returns_empty" type="text/worklet">
|
||||
registerAnimator("state_function_returns_empty", class {
|
||||
constructor(options, state = { test_local_time: 0 }) {
|
||||
|
|
@ -70,6 +95,7 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
const EXPECTED_FRAMES_TO_A_SCOPE_SWITCH = 15;
|
||||
async function localTimeDoesNotUpdate(animation) {
|
||||
// The local time stops increasing after the animator instance being dropped.
|
||||
// e.g. 0, 1, 2, .., n, n, n, n, .. where n is the frame that the global
|
||||
|
|
@ -109,7 +135,6 @@
|
|||
|
||||
// effect.localTime should be correctly increased upon global scope
|
||||
// switches for stateful animators.
|
||||
const EXPECTED_FRAMES_TO_A_SCOPE_SWITCH = 15;
|
||||
await waitForAnimationFrameWithCondition(_ => {
|
||||
return animation.effect.getComputedTiming().localTime ==
|
||||
EXPECTED_FRAMES_TO_A_SCOPE_SWITCH;
|
||||
|
|
@ -132,6 +157,34 @@
|
|||
animation.cancel();
|
||||
}, "Stateless animator gets reecreated with 'undefined' state.");
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('stateless_animator_preserves_effect_local_time').textContent);
|
||||
const target = document.getElementById('target');
|
||||
const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
|
||||
const animation = new WorkletAnimation('stateless_animator_preserves_effect_local_time', effect);
|
||||
animation.play();
|
||||
|
||||
await waitForAnimationFrameWithCondition(_ => {
|
||||
return animation.effect.getComputedTiming().localTime == EXPECTED_FRAMES_TO_A_SCOPE_SWITCH;
|
||||
});
|
||||
|
||||
animation.cancel();
|
||||
}, "Stateless animator should preserve the local time of its effect.");
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('stateless_animator_does_not_copy_effect_object').textContent);
|
||||
const target = document.getElementById('target');
|
||||
const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
|
||||
const animation = new WorkletAnimation('stateless_animator_does_not_copy_effect_object', effect);
|
||||
animation.play();
|
||||
|
||||
await waitForAnimationFrameWithCondition(_ => {
|
||||
return animation.effect.getComputedTiming().localTime == 10000;
|
||||
});
|
||||
|
||||
animation.cancel();
|
||||
}, "Stateless animator should not copy the effect object.");
|
||||
|
||||
promise_test(async t => {
|
||||
await runInAnimationWorklet(document.getElementById('state_function_returns_empty').textContent);
|
||||
const target = document.getElementById('target');
|
||||
|
|
|
|||
|
|
@ -28,16 +28,16 @@ README.md: index.html
|
|||
| $(EXPAND) $(EXPANDFLAGS) > $@
|
||||
|
||||
messages.json: .FORCE
|
||||
$(CURL) $(CURLFLAGS) -O \
|
||||
https://sideshowbarker.net/nightlies/jar/vnu.jar
|
||||
$(CURL) $(CURLFLAGS) -O -L \
|
||||
https://github.com/validator/validator/releases/download/jar/vnu.jar
|
||||
$(JAVA) $(JAVAFLAGS) -cp vnu.jar nu.validator.client.TestRunner \
|
||||
--ignore=html-its --write-messages $@
|
||||
$(PYTHON) $(PYTHONFLAGS) -mjson.tool $@ > $@.tmp
|
||||
mv $@.tmp $@
|
||||
|
||||
test: .FORCE
|
||||
$(CURL) $(CURLFLAGS) -O \
|
||||
https://sideshowbarker.net/nightlies/jar/vnu.jar
|
||||
$(CURL) $(CURLFLAGS) -O -L \
|
||||
https://github.com/validator/validator/releases/download/jar/vnu.jar
|
||||
$(JAVA) $(JAVAFLAGS) -cp vnu.jar nu.validator.client.TestRunner \
|
||||
--ignore=html-its messages.json
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="timeout" content="long">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -11,43 +11,48 @@ There's also a load of [general guidelines][] that apply to all tests.
|
|||
|
||||
## Test Type
|
||||
|
||||
There are four main test types:
|
||||
Tests in this project use a few different approaches to verify expected
|
||||
behavior. The tests can be classified based on the way they express
|
||||
expectations:
|
||||
|
||||
* [Reftests][] should be used to test rendering and layout. They
|
||||
consist of two or more pages with assertions as to whether they
|
||||
render identically or not.
|
||||
* Rendering tests should be used to verify that the browser graphically
|
||||
displays pages as expected. See the [rendering test guidelines][rendering]
|
||||
for tips on how to write great rendering tests. There are a few different
|
||||
ways to write rendering tests:
|
||||
|
||||
* [testharness.js][] tests should be used (where
|
||||
possible!) for testing everything else. They are built with the
|
||||
testharness.js unit testing framework, and consist of assertions
|
||||
written in JavaScript.
|
||||
* [Reftests][] should be used to test rendering and layout. They consist of
|
||||
two or more pages with assertions as to whether they render identically or
|
||||
not.
|
||||
|
||||
* [Visual tests][visual] should be used for checking rendering where
|
||||
there is a large number of conforming renderings such that reftests
|
||||
are impractical. They consist of a page that renders to final state
|
||||
at which point a screenshot can be taken and compared to an expected
|
||||
rendering for that user agent on that platform.
|
||||
* [Visual tests][visual] should be used for checking rendering where there is
|
||||
a large number of conforming renderings such that reftests are impractical.
|
||||
They consist of a page that renders to final state at which point a
|
||||
screenshot can be taken and compared to an expected rendering for that user
|
||||
agent on that platform.
|
||||
|
||||
* [Manual tests][manual] are used as a last resort for anything
|
||||
that can't be tested using any of the above. They consist of a page
|
||||
that needs manual interaction or verification of the final result.
|
||||
* [testharness.js][] tests should be used (where possible!) for testing
|
||||
everything else. They are built with the testharness.js unit testing
|
||||
framework, and consist of assertions written in JavaScript.
|
||||
|
||||
In general, there is a strong preference towards the first two test
|
||||
types (as they can be easily run without human interaction), so they
|
||||
* [wdspec][] tests are written in Python using
|
||||
[pytest](https://docs.pytest.org/en/latest/) and test [the WebDriver browser
|
||||
automation protocol](https://w3c.github.io/webdriver/)
|
||||
|
||||
* [Manual tests][manual] are used as a last resort for anything that can't be
|
||||
tested using any of the above. They consist of a page that needs manual
|
||||
interaction or verification of the final result.
|
||||
|
||||
In general, there is a strong preference towards reftests and testharness.js
|
||||
tests types (as they can be easily run without human interaction), so they
|
||||
should be used in preference to the others even if it results in a
|
||||
somewhat cumbersome test; there is a far weaker preference between the
|
||||
first two, and it is at times advisable to use testharness.js tests
|
||||
two test types, and it is at times advisable to use testharness.js tests
|
||||
for things which would typically be tested using reftests but for
|
||||
which it would be overly cumbersome.
|
||||
|
||||
See [file names][] for test types and features determined by the file names,
|
||||
and [server features][] for advanced testing features.
|
||||
|
||||
In addition to the four main test types, there are also WebDriver
|
||||
tests, which are used exclusively for testing the WebDriver protocol
|
||||
itself. There is currently no documentation about these tests,
|
||||
however.
|
||||
|
||||
## Submitting Tests
|
||||
|
||||
Once you've written tests, please submit them using
|
||||
|
|
@ -58,9 +63,11 @@ make sure you run the [`lint` script][lint-tool] before opening a pull request!
|
|||
[file names]: {{ site.baseurl }}{% link _writing-tests/file-names.md %}
|
||||
[general guidelines]: {{ site.baseurl }}{% link _writing-tests/general-guidelines.md %}
|
||||
[reftests]: {{ site.baseurl }}{% link _writing-tests/reftests.md %}
|
||||
[rendering]: {{ site.baseurl }}{% link _writing-tests/rendering.md %}
|
||||
[server features]: {{ site.baseurl }}{% link _writing-tests/server-features.md %}
|
||||
[testharness.js]: {{ site.baseurl }}{% link _writing-tests/testharness.md %}
|
||||
[visual]: {{ site.baseurl }}{% link _writing-tests/visual.md %}
|
||||
[manual]: {{ site.baseurl }}{% link _writing-tests/manual.md %}
|
||||
[submission-process]: {{ site.baseurl }}{% link _writing-tests/submission-process.md %}
|
||||
[lint-tool]: {{ site.baseurl }}{% link _writing-tests/lint-tool.md %}
|
||||
[wdspec]: {{ site.baseurl }}{% link _writing-tests/wdspec.md %}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ below to fix all errors reported.
|
|||
the `<meta name="timeout"...>` element to precede the `script` element.
|
||||
|
||||
* **LAYOUTTESTS APIS**: Test file uses `eventSender`, `testRunner`, or
|
||||
`window.internals` which are LayoutTests-specific APIs used in WebKit/Blink.
|
||||
`internals` which are LayoutTests-specific APIs used in WebKit/Blink.
|
||||
|
||||
* **MALFORMED-VARIANT**: Test file with a `<meta name='variant'...>`
|
||||
element whose `content` attribute has a malformed value; **fix**: ensure
|
||||
|
|
|
|||
75
tests/wpt/web-platform-tests/docs/_writing-tests/wdspec.md
Normal file
75
tests/wpt/web-platform-tests/docs/_writing-tests/wdspec.md
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
layout: page
|
||||
title: wdspec tests
|
||||
order: -1
|
||||
---
|
||||
|
||||
The term "wdspec" describes a type of test in WPT which verifies some aspect of
|
||||
[the WebDriver protocol](https://w3c.github.io/webdriver/). These tests are
|
||||
written in [the Python programming language](https://www.python.org/) and
|
||||
structured with [the pytest testing
|
||||
framework](https://docs.pytest.org/en/latest/).
|
||||
|
||||
The test files are organized into subdirectories based on the WebDriver
|
||||
command under test. For example, tests for [the Close Window
|
||||
command](https://w3c.github.io/webdriver/#close-window) are located in then
|
||||
`close_window` directory.
|
||||
|
||||
Similar to [testharness.js][] tests, wdspec tests contain within them any
|
||||
number of "sub-tests." Sub-tests are defined as Python functions whose name
|
||||
begins with `test_`, e.g. `test_stale_element`.
|
||||
|
||||
## The `webdriver` client library
|
||||
|
||||
web-platform-tests maintains a WebDriver client library called `webdriver`
|
||||
located in the `tools/webdriver/` directory. Like other client libraries, it
|
||||
makes it easier to write code which interfaces with a browser using the
|
||||
protocol.
|
||||
|
||||
Many tests require some "set up" code--logic intended to bring the browser to a
|
||||
known state from which the expected behavior can be verified. The convenience
|
||||
methods in the `webdriver` library **should** be used to perform this task
|
||||
because they reduce duplication.
|
||||
|
||||
However, the same methods **should not** be used to issue the command under
|
||||
test. Instead, the HTTP request describing the command should be sent directly.
|
||||
This practice promotes the descriptive quality of the tests and limits
|
||||
indirection that tends to obfuscate test failures.
|
||||
|
||||
Here is an example of a test for [the Element Click
|
||||
command](https://w3c.github.io/webdriver/#element-click):
|
||||
|
||||
```python
|
||||
from tests.support.asserts import assert_success
|
||||
from tests.support.inline import inline
|
||||
|
||||
def test_null_response_value(session):
|
||||
# The high-level API is used to set up a document and locate a click target
|
||||
session.url = inline("<p>foo")
|
||||
element = session.find.css("p", all=False)
|
||||
|
||||
# An HTTP request is explicitly constructed for the "click" command itself
|
||||
response = session.transport.send(
|
||||
"POST", "session/{session_id}/element/{element_id}/click".format(
|
||||
session_id=session.session_id,
|
||||
element_id=element.id))
|
||||
|
||||
assert_success(response)
|
||||
```
|
||||
|
||||
## Utility functions
|
||||
|
||||
The `wedbdriver` library is minimal by design. It mimics the structure of the
|
||||
WebDriver specification. Many conformance tests perform similar operations
|
||||
(e.g. calculating the center point of an element or creating a document), but
|
||||
the library does not expose methods to facilitate them. Instead, wdspec tests
|
||||
define shared functionality in the form of "support" files.
|
||||
|
||||
Many of these functions are intended to be used directly from the tests using
|
||||
Python's built-in `import` keyword. Others (particularly those that operate on
|
||||
a WebDriver session) are defined in terms of Pytest "fixtures" and must be
|
||||
loaded accordingly. For more detail on how to define and use test fixtures,
|
||||
please refer to [the pytest project's documentation on the
|
||||
topic](https://docs.pytest.org/en/latest/fixture.html).
|
||||
|
||||
[testharness.js]: {{ site.baseurl }}{% link _writing-tests/testharness.md %}
|
||||
|
|
@ -58,27 +58,32 @@ the filesystem, and is preferred for larger specifications.
|
|||
|
||||
## Test Types
|
||||
|
||||
The testsuite has a few types of tests, outlined below:
|
||||
Tests in this project use a few different approaches to verify expected
|
||||
behavior. The tests can be classified based on the way they express
|
||||
expectations:
|
||||
|
||||
* [testharness.js][] tests, which are run
|
||||
through a JS harness and report their result back with JS.
|
||||
* Rendering tests ensure that the browser graphically displays pages as
|
||||
expected. There are a few different ways this is done:
|
||||
|
||||
* [Reftests][], which render two (or more) web
|
||||
pages and combine them with equality assertions about their
|
||||
rendering (e.g., `A.html` and `B.html` must render identically), run
|
||||
either by the user switching between tabs/windows and trying to
|
||||
observe differences or through automated scripts.
|
||||
* [Reftests][] render two (or more) web pages and combine them with equality
|
||||
assertions about their rendering (e.g., `A.html` and `B.html` must render
|
||||
identically), run either by the user switching between tabs/windows and
|
||||
trying to observe differences or through [automated
|
||||
scripts][running-from-local-system].
|
||||
|
||||
* [Visual tests][visual] which display a page where the
|
||||
result is determined either by a human looking at it or by comparing
|
||||
it with a saved screenshot for that user agent on that platform.
|
||||
* [Visual tests][visual] display a page where the result is determined either
|
||||
by a human looking at it or by comparing it with a saved screenshot for
|
||||
that user agent on that platform.
|
||||
|
||||
* [Manual tests][manual], which rely on a human to run
|
||||
them and determine their result.
|
||||
* [testharness.js][] tests verify that JavaScript interfaces behave as
|
||||
expected. They get their name from the JavaScript harness that's used to
|
||||
execute them.
|
||||
|
||||
* WebDriver tests, which are used for testing the WebDriver protocol
|
||||
itself.
|
||||
* [wdspec]() tests are written in Python and test [the WebDriver browser
|
||||
automation protocol](https://w3c.github.io/webdriver/)
|
||||
|
||||
* [Manual tests][manual] rely on a human to run them and determine their
|
||||
result.
|
||||
|
||||
## GitHub
|
||||
|
||||
|
|
@ -108,3 +113,5 @@ free to add yourself to the META.yml file!
|
|||
[visual]: {{ site.baseurl }}{% link _writing-tests/visual.md %}
|
||||
[manual]: {{ site.baseurl }}{% link _writing-tests/manual.md %}
|
||||
[github-intro]: {{ site.baseurl }}{% link _appendix/github-intro.md %}
|
||||
[running-from-local-system]: {{ site.baseurl}}{% link _running-tests/from-local-system.md %}
|
||||
[wdspec]: {{ site.baseurl }}{% link _writing-tests/wdspec.md %}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ body {
|
|||
// Only the first characters of the data URI are included in the entry.
|
||||
const uriPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA';
|
||||
checkElementWithoutResourceTiming(entry, uriPrefix, 'my_div', 'target',
|
||||
beforeRender);
|
||||
beforeRender, document.getElementById('target'));
|
||||
// The background image is a red square of length 10.
|
||||
checkRect(entry, [0, 100, 0, 50]);
|
||||
checkNaturalSize(entry, 10, 10);
|
||||
|
|
|
|||
|
|
@ -36,14 +36,16 @@ body {
|
|||
numObservedElements++;
|
||||
if (entry.id == 'div1') {
|
||||
observedDiv1 = true;
|
||||
checkElement(entry, pathname, 'et1', 'div1', beforeRender);
|
||||
checkElement(entry, pathname, 'et1', 'div1', beforeRender,
|
||||
document.getElementById('div1'));
|
||||
// Div is in the top left corner.
|
||||
checkRect(entry, [0, 100, 0, 100]);
|
||||
checkNaturalSize(entry, 100, 100);
|
||||
}
|
||||
else if (entry.id == 'div2') {
|
||||
observedDiv2 = true;
|
||||
checkElement(entry, pathname, 'et2', 'div2', beforeRender);
|
||||
checkElement(entry, pathname, 'et2', 'div2', beforeRender,
|
||||
document.getElementById('div2'));
|
||||
// Div is below div1, on the left.
|
||||
checkRect(entry, [0, 200, 100, 200]);
|
||||
checkNaturalSize(entry, 100, 100);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender);
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender,
|
||||
document.getElementById('target'));
|
||||
// The background image extends to occupy to full size of the div.
|
||||
checkRect(entry, [0, 200, 0, 150]);
|
||||
// The natural size of the square remains unchanged.
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square20.jpg';
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender);
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
|
||||
checkNaturalSize(entry, 20, 20);
|
||||
});
|
||||
}, "Element Timing: image loads before onload.");
|
||||
|
|
|
|||
|
|
@ -12,13 +12,14 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
async_test((t) => {
|
||||
let img;
|
||||
const pathname = 'http://{{domains[www]}}:{{ports[http][1]}}'
|
||||
+ '/element-timing/resources/square100.png';
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done((entryList) => {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
checkElement(entry, pathname, 'my_image', 'the_id', 0);
|
||||
checkElement(entry, pathname, 'my_image', 'the_id', 0, img);
|
||||
assert_equals(entry.startTime, 0,
|
||||
'The startTime of a cross-origin image should be 0.');
|
||||
checkRect(entry, [0, 100, 0, 100]);
|
||||
|
|
@ -31,7 +32,7 @@ body {
|
|||
// TODO(npm): change observer to use buffered flag.
|
||||
window.onload = t.step_func(() => {
|
||||
// Add a cross origin image resource.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = pathname;
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'the_id');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Element Timing: element attribute returns null when element is disconnected</title>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
// This method will check that entry.element is |img|.
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
|
||||
|
||||
img.parentNode.removeChild(img);
|
||||
// After removing image, entry.element should return null.
|
||||
assert_equals(entry.element, null);
|
||||
})
|
||||
);
|
||||
observer.observe({entryTypes: ['element']});
|
||||
// We add the image during onload to be sure that the observer is registered
|
||||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add image of width equal to 100 and height equal to 100.
|
||||
img = document.createElement('img');
|
||||
img.src = 'resources/square100.png';
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'my_id');
|
||||
document.body.appendChild(img);
|
||||
beforeRender = performance.now();
|
||||
};
|
||||
}, 'Disconnected elements have null as their |element| attribute.');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -13,13 +13,14 @@ body {
|
|||
<script>
|
||||
async_test((t) => {
|
||||
let beforeRender;
|
||||
let img;
|
||||
const img_src = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/'
|
||||
+ 'resources/TAOImage.py?tao=wildcard';
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done((entryList) => {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
checkElement(entry, img_src, 'my_image', 'my_id', beforeRender);
|
||||
checkElement(entry, img_src, 'my_image', 'my_id', beforeRender, img);
|
||||
// Assume viewport has size at least 20, so the element is fully visible.
|
||||
checkRect(entry, [0, 20, 0, 20]);
|
||||
checkNaturalSize(entry, 20, 20);
|
||||
|
|
@ -30,7 +31,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
// TODO(npm): change observer to use buffered flag.
|
||||
window.onload = t.step_func(() => {
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = img_src;
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'my_id');
|
||||
|
|
|
|||
|
|
@ -37,13 +37,15 @@ body {
|
|||
const observer = new PerformanceObserver(list => {
|
||||
list.getEntries().forEach(entry => {
|
||||
if (entry_count % 2 == 0) {
|
||||
checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count]);
|
||||
checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count],
|
||||
document.getElementById('image0'));
|
||||
checkRect(entry, [0, 200, 0, 200]);
|
||||
checkNaturalSize(entry, 200, 200);
|
||||
entry_count_per_element[0]++;
|
||||
}
|
||||
else {
|
||||
checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count]);
|
||||
checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count],
|
||||
document.getElementById('image1'));
|
||||
checkRect(entry, [0, 100, 0, 100]);
|
||||
checkNaturalSize(entry, 100, 100);
|
||||
entry_count_per_element[1]++;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ async_test(function (t) {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/circle.svg';
|
||||
checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender);
|
||||
checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender,
|
||||
document.getElementById('SVG'));
|
||||
// Image size is 200x200 but SVG size is 100x100 so it is clipped.
|
||||
checkRect(entry, [0, 100, 0, 100]);
|
||||
checkNaturalSize(entry, 200, 200);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ body {
|
|||
// Only the first characters of the data URI are included in the entry.
|
||||
const uriPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA';
|
||||
checkElementWithoutResourceTiming(entry, uriPrefix, 'my_img', 'inline_wee',
|
||||
beforeRender);
|
||||
beforeRender, document.getElementById('inline_wee'));
|
||||
// The image is a red square of length 10.
|
||||
checkRect(entry, [0, 10, 0, 10]);
|
||||
checkNaturalSize(entry, 10, 10);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
|
|
@ -20,7 +21,7 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square20.png';
|
||||
checkElement(entry, pathname, 'not_fully_visible', '', beforeRender);
|
||||
checkElement(entry, pathname, 'not_fully_visible', '', beforeRender, img);
|
||||
// Image will not be fully visible. It should start from the top left part
|
||||
// of the document, excluding the margin, and then overflow.
|
||||
checkRect(entry,
|
||||
|
|
@ -33,7 +34,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add an image setting width and height equal to viewport.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = 'resources/square20.png';
|
||||
img.setAttribute('elementtiming', 'not_fully_visible');
|
||||
img.width = document.documentElement.clientWidth;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ body {
|
|||
assert_equals(e.data.naturalWidth, 100);
|
||||
assert_equals(e.data.naturalHeight, 100);
|
||||
assert_equals(e.data.id, 'iframe_img_id');
|
||||
assert_equals(e.data.elementId, 'iframe_img_id');
|
||||
t.done();
|
||||
});
|
||||
}, 'Element Timing entry in iframe has coordinates relative to the iframe.');
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index - 14) +
|
||||
'images/black-rectangle.png';
|
||||
checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender);
|
||||
checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,
|
||||
document.getElementById('rect_id'));
|
||||
checkRect(entry, [0, 200, 25, 125]);
|
||||
checkNaturalSize(entry, 100, 50);
|
||||
})
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue