diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
index 01a93eb15f0af..cbc8ce7da217a 100644
--- a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
@@ -18,11 +18,7 @@
   function runTests() {
       var reference = document.getElementById("horizontal-tb_ltr");
 
-      ["horizontal-tb_rtl",
-       "vertical-lr_ltr",
-       "vertical-lr_rtl",
-       "vertical-rl_ltr",
-       "vertical-rl_rtl"].forEach(id => {
+      ["horizontal-tb_rtl"].forEach(id => {
            var element = document.getElementById(id);
 
            test(function() {
@@ -69,53 +65,5 @@
       </mrow>
     </math>
   </p>
-  <p>
-    <math style="writing-mode: vertical-lr;">
-      <mrow id="vertical-lr_ltr">
-        <mspace style="background: blue"
-                width="20px" height="30px" depth="40px"></mspace>
-        <mspace style="background: black"
-                width="50px" depth="60px"></mspace>
-        <mspace style="background: yellow"
-                width="70px" height="80px"></mspace>
-      </mrow>
-    </math>
-  </p>
-  <p>
-    <math style="writing-mode: vertical-lr; direction: rtl;">
-      <mrow id="vertical-lr_rtl">
-        <mspace style="background: blue"
-                width="20px" height="30px" depth="40px"></mspace>
-        <mspace style="background: black"
-                width="50px" depth="60px"></mspace>
-        <mspace style="background: yellow"
-                width="70px" height="80px"></mspace>
-      </mrow>
-    </math>
-  </p>
-  <p>
-    <math style="writing-mode: vertical-rl;">
-      <mrow id="vertical-rl_ltr">
-        <mspace style="background: blue"
-                width="20px" height="30px" depth="40px"></mspace>
-        <mspace style="background: black"
-                width="50px" depth="60px"></mspace>
-        <mspace style="background: yellow"
-                width="70px" height="80px"></mspace>
-      </mrow>
-    </math>
-  </p>
-  <p>
-    <math style="writing-mode: vertical-rl; direction: rtl;">
-      <mrow id="vertical-rl_rtl">
-        <mspace style="background: blue"
-                width="20px" height="30px" depth="40px"></mspace>
-        <mspace style="background: black"
-                width="50px" depth="60px"></mspace>
-        <mspace style="background: yellow"
-                width="70px" height="80px"></mspace>
-      </mrow>
-    </math>
-  </p>
 </body>
 </html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.tentative.html
new file mode 100644
index 0000000000000..642ee66965181
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.tentative.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      var reference = document.getElementById("horizontal-tb_ltr");
+
+      // These tests are kept in a separate tentative.html file until it is
+      // clear how to handle vertical math layout.
+      // See https://github.com/mathml-refresh/mathml/issues/18
+      ["vertical-lr_ltr",
+       "vertical-lr_rtl",
+       "vertical-rl_ltr",
+       "vertical-rl_rtl"].forEach(id => {
+           var element = document.getElementById(id);
+
+           test(function() {
+               var style = window.getComputedStyle(element);
+               var writingMode = id.split("_");
+               assert_equals(style.getPropertyValue("writing-mode"),
+                             writingMode[0], "writing-mode");
+               assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+           }, `Inheritance of CSS writing-mode and direction (id='${id}')`);
+
+           test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              compareLayout(element, reference, epsilon);
+           }, `Layout of mrow (id='${id}')`);
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow id="horizontal-tb_ltr">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="writing-mode: vertical-lr;">
+      <mrow id="vertical-lr_ltr">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="writing-mode: vertical-lr; direction: rtl;">
+      <mrow id="vertical-lr_rtl">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="writing-mode: vertical-rl;">
+      <mrow id="vertical-rl_ltr">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="writing-mode: vertical-rl; direction: rtl;">
+      <mrow id="vertical-rl_rtl">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
index 97be6292eb0b4..85c869eba3bc3 100644
--- a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
@@ -21,11 +21,7 @@
           if (tag == "annotation" || tag == "annotation-xml")
               continue; // These tags have display: none.
 
-          ["horizontal-tb_rtl",
-           "vertical-lr_ltr",
-           "vertical-lr_rtl",
-           "vertical-rl_ltr",
-           "vertical-rl_rtl"].forEach(id => {
+          ["horizontal-tb_rtl"].forEach(id => {
                var writingMode = id.split("_");
                var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;
 
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.tentative.html
new file mode 100644
index 0000000000000..e86f03a4f0267
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.tentative.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      for (tag in MathMLFragments) {
+          if (tag == "annotation" || tag == "annotation-xml")
+              continue; // These tags have display: none.
+
+          // These tests are kept in a separate tentative.html file until it is
+          // clear how to handle vertical math layout.
+          // See https://github.com/mathml-refresh/mathml/issues/18
+          ["vertical-lr_ltr",
+           "vertical-lr_rtl",
+           "vertical-rl_ltr",
+           "vertical-rl_rtl"].forEach(id => {
+               var writingMode = id.split("_");
+               var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;
+
+               document.body.insertAdjacentHTML("beforeend", `<div>\
+<math>${MathMLFragments[tag]}</math>\
+<math>${MathMLFragments[tag]}</math>\
+</div>`);
+               var div = document.body.lastElementChild;
+
+               var styleMath = div.firstElementChild;
+               styleMath.setAttribute("style", writingModeString);
+               var styleElement = FragmentHelper.element(styleMath);
+
+               var referenceMath = div.lastElementChild;
+               var referenceElement = FragmentHelper.element(referenceMath);
+
+               [styleMath, referenceMath].forEach(math => {
+                   Array.from(math.getElementsByClassName("mathml-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<mspace style='background: blue'\
+        width='20px' height='30px' depth='40px'></mspace>\
+<mspace style='background: black'\
+        width='50px' depth='60px'></mspace>\
+<mspace style='background: yellow'\
+        width='70px' height='80px'></mspace>");
+                   });
+                   Array.from(math.getElementsByClassName("foreign-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<span style='display: inline-block; background: lightblue;\
+             inline-size: 20px; block-size: 30px;\
+             vertical-align: bottom;'></span>\
+<span style='display: inline-block; background: pink;\
+             inline-size: 40px; block-size: 50px;\
+             vertical-align: bottom;'></span>");
+                   });
+               });
+
+               test(function() {
+                   assert_true(MathMLFeatureDetection.has_mspace());
+                   var style = window.getComputedStyle(styleElement);
+                   assert_equals(style.getPropertyValue("writing-mode"),
+                                 writingMode[0], "writing-mode");
+                   assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+                   compareLayout(styleElement, referenceElement, epsilon);
+               }, `Layout of ${tag} (${writingModeString})`);
+
+               div.style = "display: none;"; // Hide the div after testing.
+           });
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
