Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3

tests/wpt/metadata/css/css-fonts/variations/at-font-face-font-matching.html.ini

@@ -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
 

tests/wpt/metadata/css/css-fonts/variations/font-weight-matching.html.ini

@@ -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
 

tests/wpt/metadata/css/css-text/hyphens/hyphens-shaping-001.html.ini

@@ -0,0 +1,2 @@
+[hyphens-shaping-001.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/hyphens/hyphens-shaping-002.html.ini

@@ -0,0 +1,2 @@
+[hyphens-shaping-002.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/hyphens/hyphens-span-001.html.ini

@@ -0,0 +1,2 @@
+[hyphens-span-001.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/hyphens/shy-styling-001.html.ini

@@ -0,0 +1,2 @@
+[shy-styling-001.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/line-break/line-break-shaping-001.html.ini

@@ -0,0 +1,2 @@
+[line-break-shaping-001.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html.ini

@@ -0,0 +1,2 @@
+[overflow-wrap-shaping-001.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html.ini

@@ -0,0 +1,2 @@
+[overflow-wrap-shaping-002.html]
+  expected: FAIL

tests/wpt/metadata/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html.ini

@@ -1,2 +0,0 @@
-[white-space-pre-wrap-trailing-spaces-002.html]
-  expected: FAIL

tests/wpt/metadata/css/css-transitions/transitions-animatable-properties-01.html.ini

@@ -74,3 +74,6 @@
   [opacity end]
     expected: FAIL
 
+  [padding-bottom intermediate]
+    expected: FAIL
+

tests/wpt/metadata/css/cssom-view/matchMedia-display-none-iframe.html.ini

@@ -1,2 +0,0 @@
-[matchMedia-display-none-iframe.html]
-  expected: ERROR

tests/wpt/metadata/css/cssom/getComputedStyle-insets-sticky-container-for-abspos.html.ini

@@ -0,0 +1,2 @@
+[getComputedStyle-insets-sticky-container-for-abspos.html]
+  expected: TIMEOUT

tests/wpt/metadata/css/cssom/getComputedStyle-sticky-pos-percent.html.ini

@@ -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
+

tests/wpt/metadata/fetch/content-type/response.window.js.ini

@@ -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
-

tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini

@@ -11,6 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%0C]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20%2Cnosniff]
-    expected: FAIL
-

tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini

@@ -0,0 +1,4 @@
+[traverse_the_history_1.html]
+  [Multiple history traversals from the same task]
+    expected: FAIL
+

tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini

@@ -1,4 +0,0 @@
-[traverse_the_history_5.html]
-  [Multiple history traversals, last would be aborted]
-    expected: FAIL
-

tests/wpt/metadata/html/browsers/history/the-location-interface/location-protocol-setter-non-broken.html.ini

@@ -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
 

tests/wpt/metadata/html/semantics/embedded-content/the-img-element/non-active-document.html.ini

@@ -0,0 +1,10 @@
+[non-active-document.html]
+  [DOMParser]
+    expected: FAIL
+
+  [createHTMLDocument]
+    expected: FAIL
+
+  [<template>]
+    expected: FAIL
+

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/document-write/iframe_005.html.ini

@@ -1,4 +0,0 @@
-[iframe_005.html]
-  [document.write external script into iframe write back into parent]
-    expected: FAIL
-

tests/wpt/metadata/html/webappapis/dynamic-markup-insertion/opening-the-input-stream/ignore-opens-during-unload.window.js.ini

@@ -1,5 +1,5 @@
 [ignore-opens-during-unload.window.html]
-  expected: TIMEOUT
+  expected: CRASH
   [ignore-opens-during-unload]
     expected: FAIL
 

tests/wpt/metadata/resource-timing/resource_timing_buffer_full_eventually.html.ini

@@ -0,0 +1,5 @@
+[resource_timing_buffer_full_eventually.html]
+  expected: TIMEOUT
+  [Finite resource timing entries buffer size]
+    expected: TIMEOUT
+

tests/wpt/metadata/webaudio/the-audio-api/the-audiobuffersourcenode-interface/sub-sample-buffer-stitching.html.ini

@@ -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
+

tests/wpt/metadata/workers/semantics/multiple-workers/005.html.ini

@@ -1,5 +1,4 @@
 [005.html]
-  expected: ERROR
   [dedicated worker in shared worker in dedicated worker]
     expected: FAIL
 

tests/wpt/metadata/workers/semantics/run-a-worker/003.html.ini

@@ -1,6 +1,5 @@
 [003.html]
   type: testharness
-  expected: ERROR
   [shared]
     expected: FAIL
 

tests/wpt/web-platform-tests/animation-worklet/stateful-animator.https.html

@@ -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');

tests/wpt/web-platform-tests/conformance-checkers/Makefile

@@ -28,16 +28,16 @@ README.md: index.html
 	    | $(EXPAND) $(EXPANDFLAGS) > $@
 
 messages.json: .FORCE
-	$(CURL) $(CURLFLAGS) -O \
+	$(CURL) $(CURLFLAGS) -O -L \
-	  https://sideshowbarker.net/nightlies/jar/vnu.jar
+	  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 \
+	$(CURL) $(CURLFLAGS) -O -L \
-	  https://sideshowbarker.net/nightlies/jar/vnu.jar
+	  https://github.com/validator/validator/releases/download/jar/vnu.jar
 	$(JAVA) $(JAVAFLAGS) -cp vnu.jar nu.validator.client.TestRunner \
 	  --ignore=html-its messages.json
 

tests/wpt/web-platform-tests/cookies/samesite/fetch.html

@@ -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>

tests/wpt/web-platform-tests/cookies/samesite/form-get-blank.html

@@ -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>

tests/wpt/web-platform-tests/cookies/samesite/form-post-blank.html

@@ -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>

tests/wpt/web-platform-tests/cookies/samesite/iframe-reload.html

@@ -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>

tests/wpt/web-platform-tests/cookies/samesite/iframe.html

@@ -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>

tests/wpt/web-platform-tests/cookies/samesite/img.html

@@ -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>

tests/wpt/web-platform-tests/css/css-flexbox/align-items-007.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="http://www.google.com" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
+<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="The image should fit wholly within the flexbox." />
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<!-- This makes sure that we only see green if the flex items are sized correctly -->
+<div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
+
+<div style="display: flex; flex-direction: column; width: 100px; height: 100px; line-height: 20px; align-items: center; background: green;">
+  <img src="../support/red-rect.svg">
+</div>

tests/wpt/web-platform-tests/css/css-lists/counter-set-001-ref.html

@@ -18,8 +18,8 @@ html,body {
 <span>7</span><!-- "7" -->
 <span>0</span><!-- "0" -->
 <span>7</span><!-- "7" -->
-<span>8</span><!-- "8" -->
+<span>6</span><!-- "6" -->
-<span>2</span><!-- "2" -->
+<span>0</span><!-- "0" -->
 <x>
   <span>2</span><!-- "2" -->
 </x>

tests/wpt/web-platform-tests/css/css-lists/counter-set-001.html

@@ -21,8 +21,8 @@ span::before { content: counters(n, '.'); }
 <span style="counter-set: n 7"></span><!-- "7" -->
 <span style="counter-set: n"></span><!-- "0" -->
 <span style="counter-set: n 8 n 7"></span><!-- "7" -->
-<span style="counter-set: n 6; counter-increment: n 2"></span><!-- "8" -->
+<span style="counter-set: n 6; counter-increment: n 2"></span><!-- "6" -->
-<span style="counter-set: n; counter-increment: n 2"></span><!-- "2" -->
+<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>

tests/wpt/web-platform-tests/css/css-lists/li-list-item-counter-ref.html

@@ -17,10 +17,10 @@ body { margin-left: 10em; }
 <body>
 
 <ol><li value=0>a<li value=4>b<li value=4>c</ol>
-<ol><li value=0>a<li value=9>b<li value=9>c</ol>
-<ol><li value=-1>a<li value=3>b<li value=2>c</ol>
 <ol><li value=0>a<li value=4>b<li value=4>c</ol>
-<ol><li value=2>a<li value=6>b<li value=8>c</ol>
+<ol><li value=-1>a<li value=4>b<li value=3>c</ol>
+<ol><li value=0>a<li value=4>b<li value=4>c</ol>
+<ol><li value=2>a<li value=4>b<li value=6>c</ol>
 
 </body>
 </html>

tests/wpt/web-platform-tests/css/css-lists/li-value-counter-reset-001-ref.html

@@ -17,9 +17,9 @@ body { margin-left: 10em; }
 <body>
 
 <ol><li>a<li value=99>b</ol>
-<ol><li>a<li value=149>b</ol>
+<ol><li>a<li value=99>b</ol>
-<ol><li>a<li value=54>b</ol>
+<ol><li>a<li value=4>b</ol>
-<ol><li>a<li value=149>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>
 

tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-006.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Position Absolute: Chrome crash</title>
+<link rel="author" href="mailto:atotic@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=952644">
+<meta name="assert" content="abspos iframe with zoom gets laid out">
+<style>
+  .boundary {
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+  }
+  .abs {
+    position: absolute;
+    background: green;
+    zoom: 2;
+  }
+</style>
+<!-- Containing block with zoom causes zoomed abspos iframe
+not to be laid out-->
+<div class="boundary">
+  <div id="parent">
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  let abs = document.createElement("iframe");
+  abs.classList.add("abs");
+  document.querySelector("#parent").appendChild(abs);
+  test(() => {
+  }, 'test passes if it does not crash');
+</script>

tests/wpt/web-platform-tests/css/css-position/position-absolute-crash-chrome-007.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>CSS Position Absolute: Chrome crash</title>
+<link rel="author" href="mailto:atotic@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://crbug.com/945696">
+<meta name="assert" content="Absolute descendant inside multiple nested split inlines does not crash.">
+<style>
+  body {
+    overflow: hidden;
+    margin: 0px;
+    font-size: 24px;
+  }
+  #block-container {
+    position: relative;
+  }
+  #css-container {
+    position: relative;
+    font-size: 12px;
+  }
+  #anonymous-parent {
+    background-color: #FFFF7F;
+  }
+  #anonymous-split {
+    background-color: #FFD997;
+  }
+  #css-container {
+    background-color: #BEE0FF;
+  }
+  #abs {
+    background-color: rgba(0, 255, 0, 0.5);
+    position:absolute;
+    top: 0px;
+    left: 0px;
+  }
+  #fullabs {
+    background-color: rgba(0, 255, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+</style>
+<div id="block-container">
+  <span id="anonymous-parent">
+    parent <br>start
+    <span id="anonymous-split">
+      split start
+      <div id="splitter" >splitter</div>
+      split middle
+      <span id="css-container">
+        css-container start
+        <div id="abs">ABS</div>
+        <div id="fullabs">FULLABS</div>
+        css container end
+      </span>
+      split end
+    </span>
+    parent end
+  </span>
+</div>
+<script>
+document.body.offsetTop;
+ test(() => {
+ }, 'test passes if it does not crash');
+</script>
+

tests/wpt/web-platform-tests/css/css-position/position-absolute-in-inline-002.html

@@ -0,0 +1,51 @@
+<!doctype html>
+
+<link rel="author" href="mailto:atotic@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb">
+<meta name="assert" content="split inline containing blocks are handled correctly.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  body {
+    margin: 0;
+  }
+  #container-span {
+    position: relative;
+    outline: solid 1px gray;
+  }
+  #split {
+    width: 10px;
+    height: 10px;
+  }
+  #target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,255,0,0.3);
+  }
+</style>
+<!-- There should be a green rectangle spanning two "container span" lines  below -->
+<span id="outer-span">
+outer span
+  <span id="container-span">
+    container span start
+    <div id="split"></div>
+    <div id="target"></div>
+    container span end
+  </span>
+outer span end
+</span>
+<script>
+  test(_ => {
+    let abs_bounds = document.querySelector("#target").getClientRects();
+    let container_bounds = document.querySelector("#container-span").getClientRects();
+    assert_equals(abs_bounds.length, 1);
+    assert_equals(container_bounds.length, 3);
+    assert_equals(abs_bounds[0].left, container_bounds[0].left, "left matches container");
+    assert_equals(abs_bounds[0].top, container_bounds[0].top, "top matches container");
+    assert_equals(abs_bounds[0].right, container_bounds[2].right, "right matches container");
+    assert_equals(abs_bounds[0].bottom, container_bounds[2].bottom, "bottom matches container");
+  }, "absolute inside inline container location should be correct.");
+</script>

tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-001.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated.">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 3em;
+    line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
+    width: 0;
+    hyphens: manual;
+    margin: 1em auto;
+  }
+  .ref { color: orange; }
+  span { color: transparent; }
+</style>
+
+<p>Test passes if the black text is identical to the orange text (except the color).
+
+<div dir=rtl lang=ug class=ref>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
+
+<div dir=rtl lang=ug id=test>دامي<span>&shy;</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.
+-->

tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-shaping-002.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
+<link rel="mismatch" href="reference/hyphens-shaping-002-ref.html">
+<meta name="assert" content="Checks that some kind of hyphen does get inserted in Uyghur. (Complement fo hyphens-shaping-001.html)">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  /* The main text is invisible,
+     but we want to give the UA a chance to use the right hyphen,
+     which may be font dependent.
+   */
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    hyphens: manual;
+    margin: auto;
+    width: 0;
+  }
+  #test { color: transparent; }
+  span { color: black; }
+</style>
+
+<p>Test passes if there is something below:
+
+<div dir=rtl lang=ug id=test>دامي<span>&shy;</span>دى</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-001.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: manual hyphen and span</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<meta name="flags" content="">
+<link rel="match" href="reference/hyphens-span-001-ref.html">
+<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div><span>high</span>&shy;way</div>
+<div><span>high&shy;</span>way</div>
+<div>high<span>&shy;</span>way</div>
+<div>high<span>&shy;way</span></div>
+<div>high&shy;<span>way</span></div>
+<div><span>high</span>&shy;<span>way</span></div>
+<div><span>high&shy;wa</span>y</div>
+<div><span>hi</span>gh&shy;way</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/hyphens-span-002.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: auto hyphen and span</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<meta name="flags" content="">
+<link rel="match" href="reference/hyphens-span-002-ref.html">
+<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en><span>high</span>way</div>
+<div lang=en>high<span></span>way</div>
+<div lang=en>high<span>way</span></div>
+<div lang=en><span>high</span><span>way</span></div>
+<div lang=en><span>highwa</span>y</div>
+<div lang=en><span>hi</span>ghway</div>
+
+<!--
+This test assumes the presence of "highway"
+with a hyphenation point between "high" and "way"
+in the hyphenation dictionary for English
+in order to be useful,
+but that assumption is not necessary for the test to be correct:
+if the word doesn't hyphenate,
+it will not hyphenate in any of the cases.
+-->

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 3em;
+    line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
+    width: 0;
+    hyphens: manual;
+    margin: 1em auto;
+  }
+  .ref { color: orange; }
+</style>
+
+<p>Test passes if the black text is identical to the orange text (except the color).
+
+<div dir=rtl lang=ug class=ref>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
+
+<div dir=rtl lang=ug>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<p>Test passes if there is something below:

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x2010;</span><br>ample</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/reference/shy-styling-001-ref.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x002D;</span><br>ample</div>

tests/wpt/web-platform-tests/css/css-text/hyphens/shy-styling-001.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: soft hyphen styling</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<meta name="flags" content="">
+<link rel="match" href="reference/shy-styling-001-ref.html">
+<link rel="match" href="reference/shy-styling-001-alt-ref.html">
+<meta name="assert" content="hypens inserted where there was a soft-hyphen take on the styles that would have applied to the soft hyphen">
+<style>
+div {
+  width: 0ch;
+  hyphens: manual;
+}
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&shy;</span>ample</div>

tests/wpt/web-platform-tests/css/css-text/line-break/line-break-shaping-001.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: line-break:anywhere and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-property">
+<link rel="match" href="reference/line-break-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by line-break:anywhere">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    line-break: anywhere;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>

tests/wpt/web-platform-tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test ref</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    margin: 1rem;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+  }
+  #ref { border: solid orange; }
+  #test { border: solid blue; }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+</section>

tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:break-word and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:break-word">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    overflow-wrap: break-word;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>

tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:anywhere and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:anywhere">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    overflow-wrap: anywhere;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>

tests/wpt/web-platform-tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test ref</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    margin: 1rem;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+  }
+  #ref { border: solid orange; }
+  #test { border: solid blue; }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+</section>

tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html

@@ -3,20 +3,16 @@
 <title>test reference</title>
 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
 <style>
-aside {
-  float: left;
-  background: blue;
-}
 div {
   color: transparent;
   font-family: Ahem;
   font-size: 50px;
-  width: 5ch;
+  width: 3ch;
+  height: 2ch;
+  background: green;
 }
 </style>
 
-<p>Test passes if there is a single blue rectangle below.
+<p>Test passes if there is a single green rectangle below and no red.
 <div>
-  <aside class=own>X</aside>
-  <aside class=owbw>X</aside>
 </div>

tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html

@@ -3,6 +3,6 @@
 <title>CSS test Reference</title>
 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
 
-<p>This test passes if you can see the word PASS below, without any extra spaces.
+<p>This test passes if the letters below are spaced equally.
 
-<div>PASS</div>
+<div>X X X X</div>

tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+}
+</style>
+
+<p>This test passes if there is a green rectangle and no red.
+
+<div>X<br>X<br>X<br>X</div>

tests/wpt/web-platform-tests/css/css-text/white-space/white-space-intrinsic-size-004.html

@@ -6,25 +6,25 @@
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
 <meta name="flags" content="">
 <link rel="match" href="reference/white-space-intrinsic-size-004-ref.html">
-<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic max-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference.">
+<meta name="assert" content="Preserved spaces at the end of the line do affect the intrinsic max-content size when white-space is pre-wrap, as hanging does not prevent contributing to the max-content size. The value of overflow-wrap makes no difference.">
 <style>
 aside {
   float: left;
   white-space: pre-wrap;
-  background: blue;
+  background: green;
-  margin-bottom: 1em;
 }
 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,
+  width: 3ch;
-		 but not enough if they do, causing a line break in that case. */
+  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>

tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html

@@ -4,7 +4,7 @@
 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
 <link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html">
-<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (maximum) intrinsic size.">
+<meta name="assert" content="Hanging preserved white space at the end of the line when white-space is pre-wrap has no effect on the max-content size.">
 
 <style>
 span {
@@ -15,6 +15,6 @@ span {
 #s2 { text-align: center; }
 </style>
 
-<p>This test passes if you can see the word PASS below, without any extra spaces.
+<p>This test passes if the letters below are spaced equally.
 
-<div><span id=s1>P                                 </span><span id=s2>A                                    </span>SS</div>
+<div><span id=s1>X </span><span id=s2>X </span>X X</div>

tests/wpt/web-platform-tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html

@@ -3,25 +3,19 @@
 <title>CSS Text test: intrinsic minimum sizing of trailing spaces with white-space:pre-wrap</title>
 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
-<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-003-ref.html">
 <meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (minimum) intrinsic size.">
 
 <style>
-/* Make the table invisible */
+div {
-table { border-collapse: collapse; }
+  font: 25px/1 Ahem;
-td { padding: 0; }
-
-/* for the content of the table to be sized to their mininum intrinsic size */
-table { width: 0; }
-
-span {
-  display: inline-block;
   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>

tests/wpt/web-platform-tests/css/css-transitions/disconnected-element-001.html

@@ -23,32 +23,27 @@ on it from the completed transitions.">
 
 <script>
 promise_test(async t => {
-  // Create element but do not attach it to the document
+  // Create element and remove it from the document
   const div = addDiv(t, {
     style: 'transition: background-color 100s; background-color: red',
   });
+  div.remove();
+
+  // Attach event listeners
+  div.addEventListener('transitionrun', t.step_func(() => {
+    assert_unreached('transitionrun event should not be fired');
+  }));
 
   // Resolve before-change style
   getComputedStyle(div).backgroundColor;
 
-  // Set up after-change style
+  // Set up and resolve after-change style
   div.style.backgroundColor = 'green';
+  getComputedStyle(div).backgroundColor;
 
-  assert_equals(
+  // There should be no events received for the triggered transition.
-    getComputedStyle(div).backgroundColor,
+  await waitForFrame();
-    '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.
   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');

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-001-manual.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, vertical lines</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p>
+<div class="test">
+<span lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-002-manual.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, line wrap</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will wrap lines from left to right."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; }
+.test span { background-color:orange; color:orange;  }
+.test span#end { background-color:blue; color:blue;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the right-most side.</p>
+<div class="test">
+<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ ᠪᠠᠭᠰᠢ ᠶᠢᠨ <span id="end">ᠦᠭᠦᠯᠡᠯ</span></span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-003-manual.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, alignment</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; border: 1px solid orange; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the left side of the square box.</p>
+<div class="test">
+<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ</span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-005-manual.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, default Mongolian orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if text is vertical and the Mongolian characters are  oriented the same way as on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-006-manual.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, Mongolian joining</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the Mongolian characters are joined as shown on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-007-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, default Latin orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Latin characters rotated 90° right."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px;  float: left; margin-right: 30px;color: #ccc; }
+span[lang=en] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn+latin.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-008-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, default Arabic orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-009-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, default Arabic direction</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-010-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, Arabic joining</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px;  color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p>
+<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-012-manual.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, Latin wrapping</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px; color: #ccc; }
+span[lang=en] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+<script>
+function setMargin (height) {
+	document.getElementById('test').style.height = height+'px'
+	}
+</script>
+</head>
+<body>
+<p class="instructions">Test passes if the two Latin script words are displayed in the same relative positions around the line break as on the blue background.</p>
+<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
+<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn_en_wrap.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-014-manual.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, Arabic wrapping</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px;  color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+<script>
+function setMargin (height) {
+	document.getElementById('test').style.height = height+'px'
+	}
+</script>
+</head>
+<body>
+<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p>
+<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
+<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
+<div class="ref"><img src="support/mn_ar_wrap.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-015-manual.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, image orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, replaced content such as images is displayed upright."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc;  color: #ccc; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p>
+<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <img src="support/world.gif" alt="ref image"/> ᠤᠯᠤᠰ</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, input type=text</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" value="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, input type=text placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, textarea</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3">ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ</textarea>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, textarea placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ"></textarea>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, select, selected item</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<select>
+<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
+<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
+<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
+</select>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, select, options</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display selection options vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p>
+<div class="test">
+<select>
+<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
+<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
+<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
+</select>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, vertical lines</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically within a table cell."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p>
+<div class="test">
+<table><tbody>
+<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr>
+<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr>
+</tbody></table>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, table cell order</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left."/>
+<style type="text/css">
+.test { font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the numbers increase top-to-bottom, starting on the left.</p>
+<div class="test">
+<table><tbody>
+<tr><th>1</th><th>2</th></tr>
+<tr><td>3</td><td>4</td></tr>
+</tbody></table>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-001-manual.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, vertical lines</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p>
+<div class="test">
+<span lang="zh-hans">国际化活动万维网联盟</span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-002-manual.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, line wrap</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will wrap lines from right to left."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+.test span#end { background-color:blue; color:blue;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the left-most side.</p>
+<div class="test">
+<span lang="zh-hans">国际化活动万维网联盟国际化活动万维<span id="end">网联盟</span></span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-003-manual.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, alignment</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; border: 1px solid orange; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the right side of the square box.</p>
+<div class="test">
+<span lang="zh-hans">国际化活动万维网联盟</span>
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-005-manual.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, default Han orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-rl will display chinese characters upright."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the text is vertical and the Chinese characters are oriented the same way as on the blue background.</p>
+<div class="test" lang="mn">国际化活动万维网联盟</div>
+<div class="ref"><img src="support/zh-orientation.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-007-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, default Latin orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display Latin characters rotated 90° right by default."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
+span[lang=en] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p>
+<div class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div>
+<div class="ref"><img src="support/zh+latin.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-008-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, default Arabic orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p>
+<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
+<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-009-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, default Arabic direction</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p>
+<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
+<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-010-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, Arabic joining</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px;  color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p>
+<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
+<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-012-manual.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, Latin wrapping</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 250px; color: #ccc; }
+span[lang=en] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+<script>
+function setMargin (height) {
+	document.getElementById('test').style.height = height+'px'
+	}
+</script>
+</head>
+<body>
+<p class="instructions">Test passes if the two Latin words on the left are displayed in the same relative positions around a line break as on the blue background.</p>
+<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="250" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
+<div id="test" class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div>
+<div class="ref"><img src="support/zh_en_wrap.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-014-manual.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, Arabic wrapping</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 200px; color: #ccc; }
+span[lang=ar] { color: black; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+<script>
+function setMargin (height) {
+	document.getElementById('test').style.height = height+'px'
+	}
+</script>
+</head>
+<body>
+<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p>
+<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="200" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
+<div id="test" class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
+<div class="ref"><img src="support/zh_ar_wrap.png" alt="ref image"/></div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-015-manual.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, image orientation</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="By default, replaced content such as images is displayed upright."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc;  color: #ccc; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p>
+<div id="test" class="test" lang="zh-hans">国际化活动<img src="support/world.gif" alt="ref image"/>万维网联盟</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, input type=text</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" value="国际化活动W3C i18n万维网联盟" />
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, input type=text placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" placeholder="国际化活动W3C i18n万维网联盟" />
+</div>
+</body>
+</html>

tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, textarea</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("../../fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3">国际化活动W3C i18n万维网联盟</textarea>
+</div>
+</body>
+</html>