mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +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
File diff suppressed because it is too large
Load diff
|
|
@ -20,9 +20,6 @@
|
|||
[Matching font-weight: '430' should prefer '400 425' over '350 399']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-weight: '430' should prefer '340 398' over '501 550']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-weight: '500' should prefer '351 398' over '501 550']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -95,9 +92,6 @@
|
|||
[Matching font-style: 'oblique -21deg' should prefer 'oblique -21deg' over 'oblique -60deg -40deg']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique -21deg' should prefer 'italic' over 'oblique 0deg']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique 20deg' should prefer 'oblique 30deg 60deg' over 'oblique 40deg 50deg']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -134,9 +128,6 @@
|
|||
[Descriptor matching priority: Style has higher priority than weight]
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-weight: '430' should prefer '501 550' over '502 560']
|
||||
expected: FAIL
|
||||
|
||||
[Matching font-style: 'oblique -20deg' should prefer 'oblique -60deg -40deg' over 'oblique -10deg']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -14,15 +14,6 @@
|
|||
[Test @font-face matching for weight 1000]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 99]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 100]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 249]
|
||||
expected: FAIL
|
||||
|
||||
[Test @font-face matching for weight 250]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[hyphens-shaping-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[hyphens-shaping-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[hyphens-span-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[shy-styling-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[line-break-shaping-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[overflow-wrap-shaping-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[overflow-wrap-shaping-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[white-space-pre-wrap-trailing-spaces-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -74,3 +74,6 @@
|
|||
[opacity end]
|
||||
expected: FAIL
|
||||
|
||||
[padding-bottom intermediate]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[matchMedia-display-none-iframe.html]
|
||||
expected: ERROR
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[getComputedStyle-insets-sticky-container-for-abspos.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[getComputedStyle-sticky-pos-percent.html]
|
||||
[Sticky element's top property percentage value should be resolved against the div with overflow: hidden]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -312,24 +312,3 @@
|
|||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20%2Cnosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_5.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -18,9 +18,6 @@
|
|||
[Set data URL frame location.protocol to http+x]
|
||||
expected: FAIL
|
||||
|
||||
[Set HTTP URL frame location.protocol to x]
|
||||
expected: FAIL
|
||||
|
||||
[Set HTTP URL frame location.protocol to gopher]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
[non-active-document.html]
|
||||
[DOMParser]
|
||||
expected: FAIL
|
||||
|
||||
[createHTMLDocument]
|
||||
expected: FAIL
|
||||
|
||||
[<template>]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[iframe_005.html]
|
||||
[document.write external script into iframe write back into parent]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[ignore-opens-during-unload.window.html]
|
||||
expected: TIMEOUT
|
||||
expected: CRASH
|
||||
[ignore-opens-during-unload]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
[resource_timing_buffer_full_eventually.html]
|
||||
expected: TIMEOUT
|
||||
[Finite resource timing entries buffer size]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -11,3 +11,21 @@
|
|||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[30\]\t9.4836157560348511e-1\t9.5236867666244507e-1\t4.0071010589599609e-3\t4.2075103446311962e-3\t3.8985999999999999e-3\n\t[31\]\t9.2646563053131104e-1\t9.3139332532882690e-1\t4.9276947975158691e-3\t5.2906700783754857e-3\t3.8985999999999999e-3\n\t[32\]\t9.0087991952896118e-1\t9.0675884485244751e-1\t5.8789253234863281e-3\t6.4834496590358351e-3\t3.8985999999999999e-3\n\t[33\]\t8.7170630693435669e-1\t8.7856203317642212e-1\t6.8557262420654297e-3\t7.8033490899654511e-3\t3.8985999999999999e-3\n\t[34\]\t8.3906102180480957e-1\t8.4691369533538818e-1\t7.8526735305786133e-3\t9.2721059699818163e-3\t3.8985999999999999e-3\n\t...and 31035 more errors.\n\tMax AbsError of 8.5881388187408447e-1 at index of 1570.\n\t[1570\]\t0.0000000000000000e+0\t-8.5881388187408447e-1\t8.5881388187408447e-1\t1.0000000000000000e+0\t3.8985999999999999e-3\n\tMax RelError of 3.3137802965303198e+0 at index of 1253.\n\t[1253\]\t-4.3022233992815018e-2\t-9.9732093513011932e-3\t3.3049024641513824e-2\t3.3137802965303198e+0\t3.8985999999999999e-3\n]
|
||||
expected: FAIL
|
||||
|
||||
[# AUDIT TASK RUNNER FINISHED: 2 out of 2 tasks were failed.]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t6.3076853752136230e-2\t0.0000000000000000e+0\t6.3076853752136230e-2\tInfinity\t3.8985999999999999e-3\n\t[2\]\t1.2590248882770538e-1\t0.0000000000000000e+0\t1.2590248882770538e-1\tInfinity\t3.8985999999999999e-3\n\t[3\]\t1.8822671473026276e-1\t0.0000000000000000e+0\t1.8822671473026276e-1\tInfinity\t3.8985999999999999e-3\n\t[4\]\t2.4980127811431885e-1\t0.0000000000000000e+0\t2.4980127811431885e-1\tInfinity\t3.8985999999999999e-3\n\t[5\]\t3.1038099527359009e-1\t0.0000000000000000e+0\t3.1038099527359009e-1\tInfinity\t3.8985999999999999e-3\n\t...and 43675 more errors.\n\tMax AbsError of 9.9999898672103882e-1 at index of 225.\n\t[225\]\t9.9999898672103882e-1\t0.0000000000000000e+0\t9.9999898672103882e-1\tInfinity\t3.8985999999999999e-3\n\tMax RelError of Infinity at index of 1.\n]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-Infinity dB) is not greater than or equal to 85.58. Got -Infinity.]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-Infinity dB) is not greater than or equal to 65.737. Got -Infinity.]
|
||||
expected: FAIL
|
||||
|
||||
[< [buffer-stitching-1\] 2 out of 3 assertions were failed.]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 44100 does not equal [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...\] with an element-wise tolerance of {"absoluteThreshold":0.000090957,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t6.2648326158523560e-2\t0.0000000000000000e+0\t6.2648326158523560e-2\tInfinity\t9.0957000000000003e-5\n\t[2\]\t1.2505052983760834e-1\t0.0000000000000000e+0\t1.2505052983760834e-1\tInfinity\t9.0957000000000003e-5\n\t[3\]\t1.8696144223213196e-1\t0.0000000000000000e+0\t1.8696144223213196e-1\tInfinity\t9.0957000000000003e-5\n\t[4\]\t2.4813784658908844e-1\t0.0000000000000000e+0\t2.4813784658908844e-1\tInfinity\t9.0957000000000003e-5\n\t[5\]\t3.0833941698074341e-1\t0.0000000000000000e+0\t3.0833941698074341e-1\tInfinity\t9.0957000000000003e-5\n\t...and 44075 more errors.\n\tMax AbsError of 9.9999976158142090e-1 at index of 877.\n\t[877\]\t-9.9999976158142090e-1\t0.0000000000000000e+0\t9.9999976158142090e-1\tInfinity\t9.0957000000000003e-5\n\tMax RelError of Infinity at index of 1.\n]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
[005.html]
|
||||
expected: ERROR
|
||||
[dedicated worker in shared worker in dedicated worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
[003.html]
|
||||
type: testharness
|
||||
expected: ERROR
|
||||
[shared]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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